Labels for categories, filters and statuses. Tag and Status Tag, filled or outlined, three sizes, optionally removable.
On this page
Tags label content by category or show the filters a user has picked. Status tags show the state of an item, task or request.
Mobile · 375px
Installation
npx shadcn@latest add @dga/tagUsage
import { StatusTag, Tag } from "@/components/ui/tag";
<Tag variant="info">تقنية</Tag>
<StatusTag variant="success">مكتمل</StatusTag>Removable
Pass onDismiss to add a close button. Give it a specific name with dismissLabel, such as "إزالة الرياض", so screen-reader users know which filter it removes. Move focus to a sensible place after the tag is removed (for example the next tag or the filter field).
Mobile · 375px
Status Tag
subtle (default) sits on a tint, inverted on a solid fill and ghost has no fill. All three start with a coloured dot.
Mobile · 375px
Props
Tag
Prop
Type
StatusTag
Prop
Type
Accessibility
- Tags are
<span>s and are read as text. Put the meaning in the label; the colour and dot are extras (WCAG 1.4.1). - The close button is a real
<button>with its own name and a 24px hit area (WCAG 2.5.8). - Use Button with
aria-pressedfor tags the user can toggle on and off.
Contrast
248 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 | tag-text-neutral / tag-background-neutral-light | 13.91:1 AAA | 13.20:1 AAA |
| filled (icon) | icon-default / tag-background-neutral-light | 17.31:1 3:1 | 14.53:1 3:1 |
| outlined | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| outlined (icon) | icon-default / background-white | 17.31:1 3:1 | 14.53:1 3:1 |
status neutral
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| subtle | tag-text-neutral / tag-background-neutral-light | 13.91:1 AAA | 13.20:1 AAA |
| ghost | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| ghost (dot) | icon-default / background-white | 17.31:1 3:1 | 14.53:1 3:1 |
| inverted | text-oncolor-primary / tag-background-neutral | 7.36:1 AAA | 7.36:1 AAA |
success
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | tag-text-success / tag-background-success-light | 7.55:1 AAA | 6.63:1 AA |
| filled (icon) | tag-icon-success / tag-background-success-light | 7.55:1 3:1 | 6.63:1 3:1 |
| outlined | tag-text-success / background-white | 7.62:1 AAA | 7.17:1 AAA |
| outlined (icon) | tag-icon-success / background-white | 7.62:1 3:1 | 7.17:1 3:1 |
status success
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| subtle | tag-text-success / tag-background-success-light | 7.55:1 AAA | 6.63:1 AA |
| ghost | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| ghost (dot) | tag-icon-success / background-white | 7.62:1 3:1 | 7.17:1 3:1 |
| inverted | text-oncolor-primary / tag-background-success | 5.69:1 AA | 5.69:1 AA |
info
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | tag-text-info / tag-background-info-light | 7.61:1 AAA | 5.83:1 AA |
| filled (icon) | tag-icon-info / tag-background-info-light | 7.61:1 3:1 | 5.83:1 3:1 |
| outlined | tag-text-info / background-white | 7.83:1 AAA | 6.28:1 AA |
| outlined (icon) | tag-icon-info / background-white | 7.83:1 3:1 | 6.28:1 3:1 |
status info
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| subtle | tag-text-info / tag-background-info-light | 7.61:1 AAA | 5.83:1 AA |
| ghost | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| ghost (dot) | tag-icon-info / background-white | 7.83:1 3:1 | 6.28:1 3:1 |
| inverted | text-oncolor-primary / tag-background-info | 4.56:1 AA | 4.56:1 AA |
warning
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | tag-text-warning / tag-background-warning-light | 7.20:1 AAA | 7.41:1 AAA |
| filled (icon) | tag-icon-warning / tag-background-warning-light | 7.20:1 3:1 | 7.41:1 3:1 |
| outlined | tag-text-warning / background-white | 7.19:1 AAA | 7.89:1 AAA |
| outlined (icon) | tag-icon-warning / background-white | 7.19:1 3:1 | 7.89:1 3:1 |
status warning
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| subtle | tag-text-warning / tag-background-warning-light | 7.20:1 AAA | 7.41:1 AAA |
| ghost | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| ghost (dot) | tag-icon-warning / background-white | 7.19:1 3:1 | 7.89:1 3:1 |
| inverted | text-oncolor-primary / tag-background-warning | 5.42:1 AA | 5.42:1 AA |
error
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | tag-text-error / tag-background-error-light | 7.96:1 AAA | 5.06:1 AA |
| filled (icon) | tag-icon-error / tag-background-error-light | 7.96:1 3:1 | 5.06:1 3:1 |
| outlined | tag-text-error / background-white | 8.29:1 AAA | 5.21:1 AA |
| outlined (icon) | tag-icon-error / background-white | 8.29:1 3:1 | 5.21:1 3:1 |
status error
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| subtle | tag-text-error / tag-background-error-light | 7.96:1 AAA | 5.06:1 AA |
| ghost | tag-text-neutral / background-white | 13.91:1 AAA | 13.20:1 AAA |
| ghost (dot) | tag-icon-error / background-white | 8.29:1 3:1 | 5.21:1 3:1 |
| inverted | text-oncolor-primary / tag-background-error | 4.83:1 AA | 4.83:1 AA |
on-color
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| filled | text-oncolor-primary / tag-background-on-color | 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 |
|---|---|---|---|
| --tag-background-on-color (light) | --colors-alpha-alpha-white-20 | --colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
| --tag-background-on-color (dark) | --colors-alpha-alpha-white-20 | --colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
| Tag: text size | Text 2xs/SemiBold on every size in the exported variant table | Text sm (md, 32px), Text xs (sm, 24px) and Text 2xs (xs, 20px), SemiBold | The export lists one sample text style. A 10px label in a 32px tag is hard to read; the sizes follow the site CSS (.tag--lg uses 14px). |
| Tag: dismiss | Optional trailing icon | onDismiss adds a trailing close button (Cancel icon) with an aria-label (dismissLabel). The tag itself is not interactive. | Removable filter tags need a real button for keyboard and screen-reader users. |
| Status Tag: ghost and dot | Ghost: neutral label with no fill | Every status tag starts with a coloured dot (tag-icon-*; tag-dot on inverted) so ghost tags still show their colour. | Ghost tags would otherwise all look the same; the dot is decorative and the label carries the status. |