Styling: Badge

Oracle® JavaScript Extension Toolkit (JET)
9.0.0
F24343-01

Version:
  • 9.0.0
.oj-badge
Create a span with the appropriate text inside and add class="oj-badge".
Example
<span class="oj-badge">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>