Badge

Variants

Use meaningful status wording for every semantic color. The default outlined appearance adds separation to standalone summaries. Dots and icons are optional.

ONLINE

DEGRADED

FAILED

PENDING

UNKNOWN

Text appearance

Use appearance="text" for status columns, dense lists, and compact metadata. It keeps the status color and typography while removing the border, padding, and fixed height. Text wraps within its container, including long labels, and can shrink with its surrounding layout. Keep status columns left aligned for scanning.

Ready for service

Awaiting inspection

Failed

Pending

Condition unknown

<Badge appearance="text" variant="warning">
  Awaiting inspection
</Badge>

Both appearances default to indicator="none". Add a dot or icon explicitly when it helps recognition. A meaningful label already provides a cue beyond color.

Awaiting inspection of the cooling loop isolation assembly

Ready

Failed

Sizes

A one-line outlined small badge is 20px high; a medium badge is 24px. Both use 8px horizontal padding. Text badges change typography size without adding a minimum height or padding. Explicit indicators have a 4px gap from the label and line up with its first line. Badges display status; interactive controls keep their own target sizes.

Small text

Medium text

Long labels

A status is never cut off and never spills out of a narrow container. A label that does not fit wraps, and a long token such as a status code breaks anywhere. An outlined badge grows with it, its lines centered like a one-line label; a one-line badge keeps its exact height. An outlined badge also keeps its width, so a short status is never squeezed into a broken word beside a long sibling in a row that does not wrap, and it is never wider than its container.

Awaiting inspection of the cooling loop isolation assembly

SENSOR_FEED_UNAVAILABLE_RETRY_WINDOW_EXCEEDED_0x7FFFFFFF

A label with an element in it, such as a value in its own normal-case span, flows as one sentence. A dot or icon sits beside the label, lined up with its first line.

Pressure above limit: 1,234.5 kPa

With icon indicator

FAILED

Props

PROP	TYPE	DEFAULT	REQUIRED
`variant`	`enum` success \| warning \| error \| info \| neutral	`"neutral"`	no
`appearance` Outlined adds a border, padding, and a minimum label height for standalone summaries: exactly that height for one line, and it grows when the label wraps, its lines centered. Text removes the box and wraps within available width for dense tables, lists, and metadata.	`enum` outlined \| text	`"outlined"`	no
`size` Typography size. One-line outlined labels are 20px (sm) or 24px (md) high with 8px inline padding. Text labels have no minimum height or padding. Explicit indicators use a 4px gap and align with the label's first line. Use Button or Toggle for actions.	`enum` sm \| md	`"sm"`	no
`indicator` Optional decorative indicator for either appearance and every variant. Defaults to none; meaningful visible status text supplies the non-color cue.	`enum` dot \| icon \| none	`"none"`	no
`icon` ReactNode rendered when indicator='icon'. Decorative; mark with aria-hidden.	`node`	—	no

Accessibility

Meaningful visible status text provides a cue beyond color. All semantic variants support indicator="none"; an additional dot or icon is optional.
Dots are decorative and aria-hidden. Mark supplied decorative icons with aria-hidden="true" so the visible label conveys the status once.
Badges are not focusable. Use Toggle or Button for interactive status.
Badge does not announce updates automatically. Use an appropriate live region in the surrounding workflow when users need to hear a status change.

Manifest entry

<Badge variant="success" indicator="dot">ONLINE</Badge>

View agent manifest

{
  "description": "Read-only uppercase status display with outlined and text appearances. Use meaningful status wording so color is not the only cue; dots and icons are optional. A status never truncates: a label that does not fit wraps, long tokens break anywhere, and the badge grows with it. An outlined badge keeps its width, so a short status is never squeezed into a broken word beside a long sibling, and is never wider than its container; a text badge can shrink with its layout. Code and kbd retain their casing; wrap other case-sensitive names or IDs in a child with normal-case tracking-normal.",
  "props": {
    "variant": {
      "type": "enum",
      "values": [
        "success",
        "warning",
        "error",
        "info",
        "neutral"
      ],
      "default": "neutral"
    },
    "appearance": {
      "type": "enum",
      "values": [
        "outlined",
        "text"
      ],
      "default": "outlined",
      "description": "Outlined adds a border, padding, and a minimum label height for standalone summaries: exactly that height for one line, and it grows when the label wraps, its lines centered. Text removes the box and wraps within available width for dense tables, lists, and metadata."
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md"
      ],
      "default": "sm",
      "description": "Typography size. One-line outlined labels are 20px (sm) or 24px (md) high with 8px inline padding. Text labels have no minimum height or padding. Explicit indicators use a 4px gap and align with the label's first line. Use Button or Toggle for actions."
    },
    "indicator": {
      "type": "enum",
      "values": [
        "dot",
        "icon",
        "none"
      ],
      "default": "none",
      "description": "Optional decorative indicator for either appearance and every variant. Defaults to none; meaningful visible status text supplies the non-color cue."
    },
    "icon": {
      "type": "node",
      "description": "ReactNode rendered when indicator='icon'. Decorative; mark with aria-hidden."
    }
  },
  "composable_with": [
    "DataTable",
    "Card",
    "Toolbar",
    "Sidebar"
  ],
  "never_inside": [
    "Badge",
    "Button"
  ],
  "example": "<Badge variant=\"success\" indicator=\"dot\">ONLINE</Badge>"
}