BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Badge

Stable
Edit in Studio

A short, non-interactive status label like Draft, Published or Failed. The words carry the meaning; the tone reinforces it.

Updated Oct 16, 2026

Rendered with the real component
Light
DraftPublishedNeeds reviewFailedBeta
Dark
DraftPublishedNeeds reviewFailedBeta

When to use

Use it for

  • The status of one item in a table row, a list or a card header.
  • subtle (default) in lists and tables where many badges sit together; solid for the single status that must win a glance (Breaking, Build failed).
  • Tone by meaning: success done or healthy, warning needs attention, danger failed or blocked, info new or changed, neutral no judgement.

Not for

  • Anything clickable or removable: use Tag.
  • A sentence or an explanation: use an inline Alert.
  • Counts on icons: use the number in text next to the label.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

PublishedFailed
Do

The text says the status, the tone backs it up

Someone who cannot tell green from red still reads Published and Failed.

DraftBreaking
Do

Subtle in rows, solid for the exception

A table full of solid badges shouts. Keep solid for the one thing that must stand out.

Don't

Color as the only signal

A dot without words fails WCAG 1.4.1 and means nothing to a screen reader.

New
Don't

A tone that contradicts the words

Danger for New borrows urgency the user did not ask for.

Accessibility

  • Static text read in reading order. No role, not focusable.
  • Subtle tones use feedback text on feedback bg (4.5:1); solid tones use text.on-solid on feedback solid (4.5:1). Checked by the token build in every brand and theme.
  • The dot and icon are decorative; the text carries the status.
  • If a status changes while the user watches (Running to Failed), announce it with a live region; the badge itself is silent.

Anatomy and tokens

Read from packages/react/src/components/Badge/Badge.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

39 tokens 28 semantic or component, change with theme and brand 11 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Badge/Badge.tsx, so this table cannot drift from the code. It also accepts every native <span> attribute.

Prop Type Default Description
tone 'neutral' | 'success' | 'warning' | 'danger' | 'info' 'neutral' Meaning of the status. The text must say it too: tone only reinforces.
appearance 'subtle' | 'solid' 'subtle' `subtle` (tinted, default) for dense lists and tables; `solid` for the one status that must win a glance.
size 'sm' | 'md' 'md' No description in the code yet.
dot boolean false Leading dot in the tone color. Ignored when an icon is set.
icon LucideIcon none Leading Lucide icon, for example CircleCheck for success.

Playground

Change the props and see the real Badge update. Controls are generated from the TypeScript props; nothing here changes the system.

Draft
<Badge>Draft</Badge>
tone
appearance
size

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Badge in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Subtle

Solid

WithDot

AllStates

Changelog

  • New

    Data display: Card restyled as a flat plate with an `interactive` option and padding sizes; Badge gains `appearance` (subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must pass `appearance="solid"` to keep their look); new Avatar and AvatarGroup, Table (sortable headers with aria-sort, selectable rows, sticky header, focusable scroll region, useTableSort), Accordion, Tag (removable, toggleable), Divider and Kbd. Adds avatar, tag, kbd, divider and accordion component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • Fix

    Add usage guidance files for Button, Input, Badge and Card, plus the list of color pairs to check for contrast. They feed the new documentation site; no visual or API change.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Initial foundation: DTCG 2025.10 primitives and light/dark semantic tokens built to CSS variables, plus Button, Input, Badge and Card consuming tokens only.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • Internal

    Regenerate gallery 2 with the Merged badge (figma-plugin)

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 16, 2026

All release notes