A short label for a status, count or category. Seven colours, filled or outlined, three sizes.
A badge is a short, non-interactive label: a status, a count or a category. For labels the user can remove or select, use a Tag.
Mobile · 375px
Not in the DGA Figma file
The badge comes from the design.dga.gov.sa CSS. Its tokens are added from the site CSS and listed under Deviations.
Installation
npx shadcn@latest add @dga/badgeUsage
import { Badge } from "@/components/ui/badge";
<Badge variant="success">مقبول</Badge>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.
Mobile · 375px
Props
Prop
Type
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 for screen readers, for example
<Badge>3<span className="sr-only"> unread</span></Badge>. - Icon-only badges need an
aria-label, oraria-hiddenif they are decorative.
Contrast
92 pairs checked against WCAG 2.1 AA (text 4.5:1, icons and focus rings 3:1), all passing. Disabled states are exempt.
neutral
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-neutral-text / badge-neutral-background | 9.73:1 AAA | 11.74:1 AAA |
| outlined | badge-neutral-text / background-white | 9.73:1 AAA | 11.74:1 AAA |
success
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-success-text / badge-success-background | 6.30:1 AA | 11.50:1 AAA |
| outlined | badge-success-text / background-white | 6.31:1 AA | 10.84:1 AAA |
error
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-error-text / badge-error-background | 6.04:1 AA | 9.82:1 AAA |
| outlined | badge-error-text / background-white | 6.29:1 AA | 10.24:1 AAA |
warning
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-warning-text / badge-warning-background | 5.20:1 AA | 10.72:1 AAA |
| outlined | badge-warning-text / background-white | 5.19:1 AA | 11.16:1 AAA |
info
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-info-text / badge-info-background | 5.57:1 AA | 9.86:1 AAA |
| outlined | badge-info-text / background-white | 5.72:1 AA | 10.16:1 AAA |
purple
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-purple-text / badge-purple-background | 9.73:1 AAA | 12.68:1 AAA |
| outlined | badge-purple-text / background-white | 10.04:1 AAA | 9.69:1 AAA |
orange
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | badge-orange-text / badge-orange-background | 5.39:1 AA | 10.35:1 AAA |
| outlined | badge-orange-text / background-white | 5.52:1 AA | 10.92:1 AAA |
on-color
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | text-oncolor-primary / badge-on-color-background | 6.30:1 AA | 6.30:1 AA |
| outlined | text-oncolor-primary / background-primary | 4.74:1 AA | 4.74:1 AA |
Deviations from DGA
| Item | DGA original | Ours | Reason |
|---|---|---|---|
| --badge-neutral-background (new) | Added from site CSS (.badge) | --colors-neutral-50 (light), --colors-neutral-800 (dark) | Badge neutral fill: neutral-50 as on the site; neutral-800 in dark mode. |
| --badge-neutral-border (new) | Added from site CSS (.badge) | --colors-neutral-200 (light), --colors-neutral-700 (dark) | Badge neutral border: neutral-200 as on the site; neutral-700 in dark mode. |
| --badge-neutral-text (new) | Added from site CSS (.badge) | --colors-neutral-700 (light), --colors-neutral-200 (dark) | Badge neutral label and icon: neutral-700 as on the site; neutral-200 in dark mode. |
| --badge-neutral-border-outlined (new) | Added from site CSS (.badge) | --colors-neutral-500 (light), --colors-neutral-400 (dark) | Badge neutral outlined border: neutral-500 as on the site; neutral-400 in dark mode. |
| --badge-success-background (new) | Added from site CSS (.badge) | --colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Badge success fill: primary-sa-flag-50 as on the site; primary-sa-flag-950 in dark mode. |
| --badge-success-border (new) | Added from site CSS (.badge) | --colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Badge success border: primary-sa-flag-200 as on the site; primary-sa-flag-800 in dark mode. |
| --badge-success-text (new) | Added from site CSS (.badge) | --colors-primary-sa-flag-700 (light), --colors-primary-sa-flag-200 (dark) | Badge success label and icon: primary-sa-flag-700 as on the site; primary-sa-flag-200 in dark mode. |
| --badge-success-border-outlined (new) | Added from site CSS (.badge) | --colors-primary-sa-flag-500 (light), --colors-primary-sa-flag-400 (dark) | Badge success outlined border: primary-sa-flag-500 as on the site; primary-sa-flag-400 in dark mode. |
| --badge-error-background (new) | Added from site CSS (.badge) | --colors-red-50 (light), --colors-red-950 (dark) | Badge error fill: red-50 as on the site; red-950 in dark mode. |
| --badge-error-border (new) | Added from site CSS (.badge) | --colors-red-200 (light), --colors-red-800 (dark) | Badge error border: red-200 as on the site; red-800 in dark mode. |
| --badge-error-text (new) | Added from site CSS (.badge) | --colors-red-700 (light), --colors-red-200 (dark) | Badge error label and icon: red-700 as on the site; red-200 in dark mode. |
| --badge-error-border-outlined (new) | Added from site CSS (.badge) | --colors-red-500 (light), --colors-red-400 (dark) | Badge error outlined border: red-500 as on the site; red-400 in dark mode. |
| --badge-warning-background (new) | Added from site CSS (.badge) | --colors-yellow-50 (light), --colors-yellow-950 (dark) | Badge warning fill: yellow-50 as on the site; yellow-950 in dark mode. |
| --badge-warning-border (new) | Added from site CSS (.badge) | --colors-yellow-200 (light), --colors-yellow-800 (dark) | Badge warning border: yellow-200 as on the site; yellow-800 in dark mode. |
| --badge-warning-text (new) | Added from site CSS (.badge) | --colors-yellow-700 (light), --colors-yellow-200 (dark) | Badge warning label and icon: yellow-700 as on the site; yellow-200 in dark mode. |
| --badge-warning-border-outlined (new) | Added from site CSS (.badge) | --colors-yellow-500 (light), --colors-yellow-400 (dark) | Badge warning outlined border: yellow-500 as on the site; yellow-400 in dark mode. |
| --badge-info-background (new) | Added from site CSS (.badge) | --colors-blue-50 (light), --colors-blue-950 (dark) | Badge info fill: blue-50 as on the site; blue-950 in dark mode. |
| --badge-info-border (new) | Added from site CSS (.badge) | --colors-blue-200 (light), --colors-blue-800 (dark) | Badge info border: blue-200 as on the site; blue-800 in dark mode. |
| --badge-info-text (new) | Added from site CSS (.badge) | --colors-blue-700 (light), --colors-blue-200 (dark) | Badge info label and icon: blue-700 as on the site; blue-200 in dark mode. |
| --badge-info-border-outlined (new) | Added from site CSS (.badge) | --colors-blue-500 (light), --colors-blue-400 (dark) | Badge info outlined border: blue-500 as on the site; blue-400 in dark mode. |
| --badge-purple-background (new) | Added from site CSS (.badge) | --colors-tertiary-lavender-50 (light), --colors-tertiary-lavender-950 (dark) | Badge purple fill: tertiary-lavender-50 as on the site; tertiary-lavender-950 in dark mode. |
| --badge-purple-border (new) | Added from site CSS (.badge) | --colors-tertiary-lavender-200 (light), --colors-tertiary-lavender-800 (dark) | Badge purple border: tertiary-lavender-200 as on the site; tertiary-lavender-800 in dark mode. |
| --badge-purple-text (new) | Added from site CSS (.badge) | --colors-tertiary-lavender-700 (light), --colors-tertiary-lavender-200 (dark) | Badge purple label and icon: tertiary-lavender-700 as on the site; tertiary-lavender-200 in dark mode. |
| --badge-purple-border-outlined (new) | Added from site CSS (.badge) | --colors-tertiary-lavender-500-primary (light), --colors-tertiary-lavender-400 (dark) | Badge purple outlined border: tertiary-lavender-500 as on the site; tertiary-lavender-400 in dark mode. |
| --badge-orange-background (new) | Added from site CSS (.badge) | --colors-orange-50 (light), --colors-orange-950 (dark) | Badge orange fill: orange-50 as on the site; orange-950 in dark mode. |
| --badge-orange-border (new) | Added from site CSS (.badge) | --colors-orange-200 (light), --colors-orange-800 (dark) | Badge orange border: orange-200 as on the site; orange-800 in dark mode. |
| --badge-orange-text (new) | Added from site CSS (.badge) | --colors-orange-700 (light), --colors-orange-200 (dark) | Badge orange label and icon: orange-700 as on the site; orange-200 in dark mode. |
| --badge-orange-border-outlined (new) | Added from site CSS (.badge) | --colors-orange-500 (light), --colors-orange-400 (dark) | Badge orange outlined border: orange-500 as on the site; orange-400 in dark mode. |
| --badge-on-color-background (new) | Added from site CSS (.badge--on-color: white 30%) | --colors-alpha-alpha-black-20 | White text on white-30 over the brand fill is 3.13:1. A black-20 tint keeps the badge visible and gives 6.30:1. |
| --badge-on-color-border-outlined (new) | Added from site CSS (.badge) | --colors-alpha-alpha-white-90 | On-colour outlined border, white 90% as on the site. |
| Badge | Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.badge). | Built from the site CSS: sizes sm 20, md 24 and lg 32px, filled and outlined, square and rounded, icon-only. Colours map to DGA palettes (brand → success, purple → lavender). | The badge is used across DGA sites. Figma is the source of truth where it exists; here only the site CSS does. |
| Badge: pink | .badge--pink and .badge--pink-outlined | Dropped | DGA has no pink palette, in Figma or in the token set. |
| Badge: on-colour outlined label | White 90% text | White text (text-oncolor-primary) | White 90% on the brand fill is 4.16:1; white is 4.57:1 or better. |