Badge / Status

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Show a short status with StatusBadge, which adds a semantic SVG for each tone. Use Badge for general labels or counts, on a neutral surface. Badges are borderless: status badges pair text and icon with a light tone surface from badge background tokens, separate from InlineMessage. Small status labels use 12px at medium (500) weight to stay legible. StatusDot is a status without words, for a state that text beside it names, such as a group's count: a flat dot in the tone's mark color, as an avatar's status marker is: the tone's hue, light enough on a dark plane and dark enough on a light one to keep 3:1 beside the words, where a badge's text color would be ink-dark. live pulses it while the state is under way; attention blinks it three times as the state arrives, such as waiting for an answer, then holds it still.

Don't convey status with color or an icon alone. Always include a text label: beside a StatusDot, or its label where no text says the state. Don't blink a dot to keep asking; attention blinks only as the state arrives. Use Button for actions instead of styling badges like buttons. Announce changes from one role=status sentence, not a live role on every badge.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Badge(text + optional icon) / StatusBadge(default semantic SVG + text) / StatusDot(dot; role=img with label, hidden without)

Keyboard and accessibility

Badges are static spans and aren't in the Tab order. To announce a status change, put role=status on one sentence.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Badge, Inline, StatusBadge, StatusDot, Text } from '@surflane/ui'

<Badge>3 environments</Badge>
<StatusBadge tone='success'>Passed</StatusBadge>
<div role='status'>
  <StatusBadge tone='progress'>Running</StatusBadge>
  <span>Deployment is in progress.</span>
</div>
<Inline gap={2}>
  <StatusDot tone='progress' live />
  <Text as='span'>Working 2</Text>
</Inline>
<StatusDot tone='caution' attention label='Waiting for you' />

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens