Skip to main content

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 #


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