-
.oj-badge
-
A Badge is a label which holds a small amount of information. It consists of a span with the appropriate text inside, with class="oj-badge".
Example
<span class="oj-badge">Badge text</span> -
.oj-badge-end
-
End badges are used at the edge of a component like card to highlight an item's status.
Example
<span class="oj-badge oj-badge-end">End Badge text</span> -
.oj-badge-sm
-
Create a small badge.
Example
<span class="oj-badge oj-badge-sm">Small badge</span> -
.oj-badge-subtle
-
Sets the badge color to be subtle.
Example
<span class="oj-badge oj-badge-danger oj-badge-subtle">Danger Subtle text</span> -
Category: Badge Color
-
Sets the badge color.
Class template:
-
.oj-badge-
[badge-color]Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for
[badge-color]Value (required) Name Description dangerDanger emphasized, failure, negative, or destructive states successSuccess valid, positive, or completed states warningWarning impeded progress states infoInfo normal progress states
Example
<span class="oj-badge oj-badge-danger">Danger text</span> -
-
CSS Variables
-
Badge
See JET CSS Variables for additional details.
Badge variables.
| Name | Type | Description |
|---|---|---|
--oj-badge-bg-color |
<color> | Badge background color |
--oj-badge-text-color |
<color> | Badge text color |
--oj-badge-font-size |
<length> | Badge font size |
--oj-badge-font-weight |
<font_weight> | Badge font weight |
--oj-badge-font-stretch |
Badge font stretch | |
--oj-badge-height |
<length> | Badge height |
--oj-badge-border-radius |
<length> | <percentage> | Badge border radius |