Badge

Structure

The Badge component uses the HTML <div> element by default and has no inherent interactivity or semantic role. The rendered element can be changed via the as prop when a different element fits the surrounding document structure better (for example as="li" inside a list of badges).

A <div> is flow content and is not valid inside phrasing contexts such as paragraphs, headings, links, or buttons — inside a <p>, the HTML parser even closes the paragraph early when it encounters a <div>. Use as="span" when the badge sits in text flow. This matters in particular when migrating from the deprecated Label component, which rendered a <span> and could legally appear anywhere text does.

Color and meaning

In many contexts, color may be used to help communicate a certain meaning to the user. However, color should never be the sole indicator of the intended meaning. Not all sighted users experience color the same way.

When using the Badge, we highly recommend considering strong and effective badge text. Text and color should work together to communicate the intended meaning.

The semantic color values (critical, caution, success, information) make the intent readable in code, but they do not change what assistive technology announces — the badge text alone carries the meaning for screen reader users.

Status indicator

The status indicator dot is a purely decorative, empty element: it is not announced by screen readers and carries no accessible name or role. Never rely on the dot to communicate a status on its own — the badge text must state the status it decorates (for example "Running" or "Stopped").

Font weight

The bold prop only changes the visual weight of the text. It has no effect on how the badge is announced.