Primitives
Badge
Labels an item with a short status, category or count, such as "Draft" or "Final".
Installation
From npm:
import { Badge } from "@cadence-clinical/ui";From the shadcn registry:
pnpm dlx shadcn@latest add @cadence/badgeInstallation covers both routes and the styles each one needs.
Usage
import { Badge } from "@cadence-clinical/ui";
<Badge variant="outline">Archived</Badge>;API
Badge follows the shadcn Badge. It renders a span, spreads the rest of its props onto it, and takes the Base UI render prop to become another element, such as a link.
Props
| Prop | Type | Default |
|---|---|---|
variant | "secondary" | "primary" | "outline" | "critical" | "warning" | "success" | "info" | "secondary" |
render | An element or a function, as in Base UI | A span |
badgeVariants returns the classes for a variant, to give another element the look of a badge.
Status variants
Each status variant uses three of its status's tokens: the tinted fill (critical-subtle), the text (critical-text) and the border (critical-border). The border gives an amber fill an edge on a white page. The status colours are the same in every theme, and no attribute changes them.
What Cadence changes
- The variant names differ. The default is
secondary, and shadcn'sdefaultisprimary. shadcn'sdestructiveis replaced by the four status variants, and itsghostandlinkvariants are not included. Code written for shadcn's Badge that usesdefault,destructive,ghostorlinkdoes not compile against Cadence's. - Four status variants, each with its fill, its text and its border token.
- Nothing is clipped or cut short. shadcn's badge has a fixed height, hides its overflow and keeps its text on one line. Cadence's has a minimum height and wraps, even a value with nowhere to break, because a badge can hold clinical text.
- Its text and icon follow the density, and its digits are tabular, so counts line up.
Accessibility
- Badge renders a
spanwith no role. A screen reader reads its text as part of the content around it. - A badge's text is not announced when it changes. To announce a change, put the badge in a live region, or announce it another way.
- A status's text holds at least 4.5:1 against its tinted fill, and its border at least 3:1 against the page and a card, in every mode. The token tests check both.