Build / Atoms

Badge

atom

A compact status or category label.

Badges are not interactive and carry no implicit ARIA role. When the badge communicates a state change (for example, "Sync failed"), announce it from a live region in the surrounding UI rather than relying on colour.

import { Badge } from '@meetcard/deck'

Example

<Badge tone="success" dot>Connected</Badge> <Badge tone="warning" variant="solid">Follow up</Badge>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Badge>Connected</Badge>;

Default emphasis — tinted background, readable text.

Subtle

Source

const Subtle = (args) => (
  <Stack direction="row" gap={8} wrap>
    {tones.map((tone) => (
      <Badge {...args} key={tone} tone={tone}>
        {tone}
      </Badge>
    ))}
  </Stack>
);

Solid, for the one status on a surface that has to be seen first.

Solid

Source

const Solid = (args) => (
  <Stack direction="row" gap={8} wrap>
    {tones.map((tone) => (
      <Badge {...args} key={tone} tone={tone} variant="solid">
        {tone}
      </Badge>
    ))}
  </Stack>
);

Outline, for descriptive labels that should recede — a tag, not a state.

Outline

Source

const Outline = (args) => (
  <Stack direction="row" gap={8} wrap>
    {tones.map((tone) => (
      <Badge {...args} key={tone} tone={tone} variant="outline">
        {tone}
      </Badge>
    ))}
  </Stack>
);

A dot adds a non-color cue to the status, which color alone cannot carry.

With Dot

Source

const WithDot = () => <Badge dot tone="success">Connected</Badge>;

sm sits inline with body text; md stands on its own.

Sizes

Source

const Sizes = () => <Stack direction="row" gap={8} align="center">
    <Badge size="sm">Small
              </Badge>
    <Badge size="md">Medium
              </Badge>
</Stack>;

Props

Prop	Type	Default	Description
`dot`	`boolean`	`false`	Show a leading status dot.
`size`	`'sm' \| 'md'`	`'md'`	—
`tone`	`'neutral' \| 'brand' \| 'success' \| 'warning' \| 'error'`	`'neutral'`	—
`variant`	`'subtle' \| 'solid' \| 'outline'`	`'subtle'`	—

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.