Badge

Storybook

Small inline status labels

Badges are compact indicators used to highlight status, category, or metadata. Each variant maps to a status colour so the meaning is immediately clear.

Variants

InfoSuccessWarningErrorNeutral

Usage examples

ActiveDraftPending reviewOverdueNew
tsx
// From the npm package
import { Badge } from 'rift-ds/components/Badge/Badge';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/badge.json