FEEDBACK

Badge

Compact uppercase label with a Memphis micro-shadow. Use to mark status, plan tier, or outcome on cards, table rows, and avatars. For longer labels with rounded corners reach for Chip.

Import

import { Badge } from 'damo-ui'

All variants

DefaultFeaturedSuccessWarningInfoDestructiveOutline
1<Badge>Default</Badge>
2<Badge variant="featured">Featured</Badge>
3<Badge variant="success">Success</Badge>
4<Badge variant="warning">Warning</Badge>
5<Badge variant="info">Info</Badge>
6<Badge variant="destructive">Destructive</Badge>
7<Badge variant="outline">Outline</Badge>

Props

Badge props
PropTypeDefaultDescription
variant'default' | 'featured' | 'success' | 'warning' | 'info' | 'destructive' | 'outline''default'Visual tone. featured uses the badge featured token; success / warning / info / destructive map to the standard status intents; outline strips the fill.
childrenReactNode—Short label — typically 1-3 uppercase words.
classNamestring—Tailwind classes are merged on top of the variant defaults.

Accessibility

  • Badge renders a <span> — the text content is the only thing announced. Pick labels that read meaningfully out of context (e.g. PRO rather than P).
  • When the badge encodes status that is not redundant with surrounding text (e.g. a single icon means "new"), pair it with a <span className="sr-only"> describing the meaning.
← SkeletonChip →