Styling: Badge

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Version:
  • 9.1.0
.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
danger Danger emphasized, failure, negative, or destructive states
success Success valid, positive, or completed states
warning Warning impeded progress states
info Info normal progress states

Example
<span class="oj-badge oj-badge-danger">Danger text</span>