Badge
A short label for a status, count or category. Seven colours, filled or outlined, three sizes.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/badgeUsage
import { Badge } from "@/components/ui/badge";
<Badge variant="success">مقبول</Badge>A badge is a short, non-interactive label. For labels the user can remove or select, use a Tag.
Anatomy
- Root: a
<span>. - Icon (optional): before the text.
- Label: the text.
Examples
Sizes, shape and icons
sm is 20px, md 24px (default) and lg 32px high. rounded makes a pill, which suits counts. iconOnly makes a square (or circle) badge and needs an aria-label.
RTL
Padding and icon position follow the reading direction.
Accessibility
- A
<span>with no role. The text is read in place, so put the meaning in the text, not only in the colour (WCAG 1.4.1). - For a count, add context:
<Badge>3<span className="sr-only"> unread</span></Badge>. - Icon-only badges need an
aria-label, oraria-hiddenif they are decorative.
API Reference
Badge
A short, non-interactive label for status, counts or categories.
| Prop | Type | Default |
|---|---|---|
"on-color" | "neutral" | "success" | "error" | "warning" | "info" | "purple" | "orange"Colour family. `on-color` is for badges on brand fills. | "neutral" | |
| ||
"sm" | "md" | "lg"Height: `sm` 20px, `md` 24px, `lg` 32px. | "md" | |
| ||
booleanOutlined instead of filled. | false | |
| ||
booleanFully rounded (pill) corners. | false | |
| ||
booleanSquare, icon only. Needs an `aria-label`. | false | |
| ||
Also accepts the props of the element it renders.
Deviations from DGA
| Change | Reason |
|---|---|
--badge-neutral-background (new) | Badge neutral fill: neutral-50 as on the site; neutral-800 in dark mode. |
--badge-neutral-border (new) | Badge neutral border: neutral-200 as on the site; neutral-700 in dark mode. |
--badge-neutral-text (new) | Badge neutral label and icon: neutral-700 as on the site; neutral-200 in dark mode. |
--badge-neutral-border-outlined (new) | Badge neutral outlined border: neutral-500 as on the site; neutral-400 in dark mode. |
Contrast
92 pairs checked · all pass WCAG 2.1 AAShow 16 statesHide
| Variant / state | Light | Dark |
|---|---|---|
| neutral / filled | 9.73:1 AAA | 9.64:1 AAA |
| neutral / outlined | 9.73:1 AAA | 12.04:1 AAA |
| success / filled | 6.30:1 AA | 7.57:1 AAA |
| success / outlined | 6.31:1 AA | 10.38:1 AAA |
| error / filled | 6.04:1 AA | 7.04:1 AAA |
| error / outlined | 6.29:1 AA | 9.01:1 AAA |
| warning / filled | 5.20:1 AA | 8.57:1 AAA |
| warning / outlined | 5.19:1 AA | 11.30:1 AAA |
| info / filled | 5.57:1 AA | 7.49:1 AAA |
| info / outlined | 5.72:1 AA | 9.88:1 AAA |
| purple / filled | 9.73:1 AAA | 6.82:1 AA |
| purple / outlined | 10.04:1 AAA | 8.78:1 AAA |
| orange / filled | 5.39:1 AA | 7.50:1 AAA |
| orange / outlined | 5.52:1 AA | 9.66:1 AAA |
| on-color / filled | 6.30:1 AA | 6.30:1 AA |
| on-color / outlined | 4.74:1 AA | 4.74:1 AA |
Text needs 4.5:1, icons and focus rings 3:1. Disabled states are exempt. Full contrast report