Display
Badge
A small status indicator. Its one axis, variant (soft, solid, outline), is never a colour: tone arrives as a palette class, as on Clickable.
npx shadcn@latest add @fragiola/badgeBadge
No colour variant
A destructive badge is <Badge className="palette-danger"> — there is no variant="destructive" and no tone prop. The palette class overrides the six roles, so bg-palette-soft becomes the danger soft tint and text-palette-accent becomes the danger accent — soft and outline paint text with accent (content on soft or on a foreign background), solid paints with contrast (content on a base you painted). This is what stops destructive from coming back as a hundred copies.
Parts
| Part | Renders |
|---|---|
Badge | <span> with badge() variants |