Badge

Annotate important information, highlight new information, or convey status

Overview #

Use the badge component to annotate important information, highlight new information, or convey the status of some data.

Examples #

Choose an example

Open in new window Copy link to example

<span class="rvt-badge">Base</span>
<span class="rvt-badge rvt-badge--info">Info</span>
<span class="rvt-badge rvt-badge--success">Success</span>
<span class="rvt-badge rvt-badge--warning">Warning</span>
<span class="rvt-badge rvt-badge--danger">Danger</span>

Open in new window Copy link to example

<span class="rvt-badge rvt-badge--secondary">Base</span>
<span class="rvt-badge rvt-badge--info-secondary">Info</span>
<span class="rvt-badge rvt-badge--success-secondary">Success</span>
<span class="rvt-badge rvt-badge--warning-secondary">Warning</span>
<span class="rvt-badge rvt-badge--danger-secondary">Danger</span>

Elements #

Element	Description	Usage	Required	Multiple
Text	Text that appears inside the badge	Limit to 1-2 words. Don't use punctuation.	Text is required	Component may contain only one Text

Usage #

Do

Use to call out new or updated content on a page
Use judiciously so that their attention-getting effect isn't diminished

Don't

Choose badge colors for purely aesthetic reasons—use the color variant that matches the situation
Use to call out critical errors requiring immediate attention—use an alert or dialog instead

Accessibility #

Don’t rely on color alone to convey meaning. The color of a badge is not enough to convey meaning to screen readers. A badge’s meaning must be clear from its text. If additional text is needed beyond the recommended 1–2 words to make a badge’s meaning clear, use the .rvt-sr-only utility class to add hidden text to a badge that’s communicated only to those using screen readers.