Vivid Logo Vivid

Badge

A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • Badges are informational only and must not be interactive.
  • If you need an interactive element, use a Tag instead.

Icon-Only Badges

  • For badges that contain only an icon, always set the Icon’s label attribute.
  • The label provides alternative text for screen readers, describing the purpose of the badge.