Components / data-display

Badge

Small status or count label. Use Subtle for most cases and Solid to draw attention.

import { Badge } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Badge } from '@basiiik/ui';

<Badge>Active</Badge>

• Badge has no interactive states.
• Storybook: Data display/Badge.

Props

States. Badge has no interactive states.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Read-only status, count or category next to another element
• A badge with an icon before the label: verified, pending, new

Do not use it when

• Filters or removable values (use Tag)
• Actions (use Button)

Rules for agents

• A Badge is read-only; it never has a click handler
• Choose tone by meaning (success, warning, danger for status; brand or neutral for categories), and keep the text meaningful on its own
• Use emphasis="subtle" for most cases and "solid" only to draw attention to one item
• A count-only Badge needs context in its accessible name, such as "3 unread"
• Place the Badge next to the item it describes
• Status tones (success, warning, danger, and info on Alert and Toast) are fixed colours: they never follow the brand colour, so do not restyle them with brand tokens; tone="brand" follows the brand colour through the accent roles (color.bg.accent.*, color.text.accent, color.text.on-accent), which Brand Mapper turns neutral when the brand is close to error, success or warning; keep it for accents and categories
• A small icon before the label (a check on "Verified", a clock on "Pending") goes in icon, not inside the children; it is decorative, so the text must carry the meaning

Avoid

• A clickable Badge (use Button or Tag)
• Removable or selectable values in a Badge (use Tag or Chip)
• Colour as the only signal, such as a red Badge with no text
• Many solid Badges in the same view
• Long text in a Badge
• Using tone="brand" to mean success, warning, error or info: it changes with the brand colour (a green brand looks like Success)

Writing the content

• One or two words: 'Active', 'Overdue', 'Beta'
• Use sentence case

Accessibility

• Give a text alternative when the badge is only a count, e.g. "3 unread"
• Use role="status" only if the value updates live

Colour tokens it reads

Related

• Tag
• Alert

data-display 20 Figma variants Try it in the live demo