Badge

Small status or category label; tone sets meaning, variant sets emphasis.

Import

import { Badge } from '@marbleui/ui'

Props

<Badge>

Prop	Type	Default
dot	`boolean`	`—`
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'neutral'`
variant	`'soft' \| 'outline' \| 'solid'`	`'soft'`

Also accepts HTML element props (278).

Usage notes

Small label for a status or category. For a live state with a pulse use StatusIndicator; for a count over an icon or a person use Avatar with status.

<Badge tone="success" dot>Active</Badge>
<Badge variant="outline" tone="danger">Failed</Badge>

tone (neutral, accent, success, warning, danger) carries meaning; variant (soft default, solid, outline) carries emphasis. dot adds a leading dot.
Don’t rely on colour alone: the text should say the state (“Failed”, not just a red badge).
It is a plain span and accepts standard HTML attributes. It is not interactive.

Example source · show

import { Badge } from './badge'

const tones = ['neutral', 'accent', 'success', 'warning', 'danger'] as const
const labels = { neutral: 'Draft', accent: 'Beta', success: 'Live', warning: 'Pending', danger: 'Failed' }

const Row = ({ variant, dot }: { variant: 'solid' | 'soft' | 'outline'; dot?: boolean }) => (
  <div className="flex flex-wrap gap-2">
    {tones.map((t) => (
      <Badge key={t} variant={variant} tone={t} dot={dot}>
        {labels[t]}
      </Badge>
    ))}
  </div>
)

export const styles = {
  Soft: () => <Row variant="soft" />,
  Solid: () => <Row variant="solid" />,
  Outline: () => <Row variant="outline" />,
  Status: () => <Row variant="soft" dot />,
}

Source: packages/ui/src/badge/badge.tsx

Catalog