Badge

• The badge component allows customization of the color and numeric count.
• Extra-small (XS) and small (SM) badges do not display a count.

<bolt-badge count="8"></bolt-badge>

<bolt-badge count="18" size="xs"></bolt-badge>
<bolt-badge count="18" size="sm"></bolt-badge>
<bolt-badge count="18" size="md"></bolt-badge>
<bolt-badge count="18" size="lg"></bolt-badge>

<bolt-badge count="18"></bolt-badge>

<bolt-badge count="18" color="light"></bolt-badge>

<bolt-badge count="18" color="dark"></bolt-badge>

• color: optional. Defaults to error. Other options include: dark and light.
• size: optional. Defaults to md. Other options include: xs, sm , and lg.
• count: optional. Sets the displayed number count.
  • Values below 2 do not show a number count.
  • Numerical values are not shown with size sm or xs.

• A Badge is a visual indicator placed closely in context to relevant content
• Badges are intentionally limited in color options so as to draw a user's attention.
• A Badge can be used with or without numeric values.
• A Badge should not use letters or symbols other than "+" (plus-sign).
• If a Badge includes a number, the maximum number displayed should be 99. For any number over 99, that number should be displayed as "99+".
• Badges should not be clickable.

• When attempting to draw a user's attention to the number of new items next to a link or button that provides access to these items. (e.g. to display a number that indicates how many unread alerts can be accessed from an accounts overview page.)

• Avoid using Badges for data that doesn't need highlighting.

• Use Chips, a Button or a Link if interaction is desired.
• If you want to indicate status, use text, Tag or Icon. Badges should not indicate status.
• Avoid standalone, floating Badges; consider Tag or alternative methods to draw a user's attention.

• If a Badge includes a number, the maximum number displayed should be 99. For any number over 99, that number should be displayed as "99+".
• A Badge should not use letters or symbols other than "+" (plus-sign).

• When using badge as a built-in option of another Bolt component, accessibility will handled by the component.
• When using <bolt-badge> directly, developers are responsible for ensuring it is used in an accessible manner.

• When a badge is used as meta-information for other inline content, ensure that its meaning is clear.
• Consider adding an appropriate aria-label to communicate the necessary information.
• If necessary, add screenreader-only (visually hidden) text as part of the element in which the badge is used.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.