Build · New
Badge
A count (unread messages, pending approvals) or a dot for something new, inside tabs, navigation items, menus and rows. For status words, use a Tag.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/badgeUsage
import { Badge } from "@/components/ui/badge";<Badge variant="brand" count={3} label="unread messages" />Examples
Styles and sizes
Five colors, and on-brand for brand backgrounds; lg and md show the count and sm is a dot. Counts above max (99) show “99+”.
API reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "gray" | "brand" | "green" | "amber" | "red" | "on-brand" | "gray" | Figma's Style (the name is reserved in React). Red only for urgent counts. |
size | "lg" | "md" | "sm" | "md" | Figma's Size; sm is a dot without a number. |
count | number | string | Figma's Count; a number is formatted in the numeral system. | |
max | number | 99 | Above it shows “99+”. |
label | ReactNode | Hidden text read after the count (“unread messages”); a dot without one reads “New”. | |
numerals | "latn" | "arab" | Default: from KanzProvider. |
Accessibility
ARIA
- The count is text read with its meaning through
label(3 unread messages); colour alone never carries the meaning. - A dot has a hidden name, “New” by default in the page language.
Arabic and RTL notes
Mirrors
- The badge follows its place in the row: at the inline end (the left) in Arabic.
Does not mirror
- “99+” keeps its order: the number is isolated LTR.
- Numerals
- The count follows
numeralsorKanzProvider(Western by default), so it matches the amounts elsewhere on the screen. - Arabic typography
label-12Medium; the badge grows with the taller Arabic line.