Styling: Badge

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Description

Classes to create a badge.


.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>

CSS Variables

See JET CSS Variables for additional details.
Badge
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