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>

Usage #

Do

Keep visible badge text to 1–2 words
Use to call out new or updated content on a page
Use judiciously so that their attention-getting effect isn't diminished

Don't

Put full sentences of text inside a badge
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.