Tag
Labels for categories, filters and statuses. Tag and Status Tag, filled or outlined, three sizes, optionally removable.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/tagUsage
import { StatusTag, Tag } from "@/components/ui/tag";
<Tag variant="info">تقنية</Tag>
<StatusTag variant="success">مكتمل</StatusTag>Tags label content by category or show the filters a user has picked. Status tags show the state of an item, task or request.
Anatomy
- Tag: a
<span>with optional icon and close button. - StatusTag: a
<span>with a coloured dot and the label. - Close button (optional): a real
<button>with a 24px hit area.
Examples
Removable
Pass onDismiss to add a close button. Give it a specific name with dismissLabel, such as "إزالة الرياض", and move focus somewhere sensible after the tag is removed.
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.
RTL
The dot, icon and close button sit on the logical start and end sides.
Accessibility
| Key | Action |
|---|---|
| Tab | Moves focus to the close button of a removable tag. |
| Enter or Space | Removes the tag. |
- 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 has its own name and a 24px hit area (WCAG 2.5.8).
- Use Button with
aria-pressedfor tags the user can toggle.
API Reference
StatusTag
The status of an item, task or request, with a coloured dot.
| Prop | Type | Default |
|---|---|---|
"neutral" | "success" | "error" | "warning" | "info"Colour family. `on-color` is for tags on brand fills. | "neutral" | |
| ||
"xs" | "sm" | "md"Height: `xs` 20px, `sm` 24px, `md` 32px. | "sm" | |
| ||
"subtle" | "inverted" | "ghost"`subtle` is a tinted fill, `inverted` a solid one and `ghost` has no fill. | "subtle" | |
| ||
Also accepts the props of the element it renders.
Tag
A label for a category or a selected filter. Optionally removable.
| Prop | Type | Default |
|---|---|---|
"on-color" | "neutral" | "success" | "error" | "warning" | "info"Colour family. `on-color` is for tags on brand fills. | "neutral" | |
| ||
"xs" | "sm" | "md"Height: `xs` 20px, `sm` 24px, `md` 32px. | "sm" | |
| ||
booleanOutlined instead of filled. | false | |
| ||
booleanFully rounded (pill) corners. | false | |
| ||
booleanSquare, icon only. Needs an `aria-label`. | false | |
| ||
() => voidAdds a trailing close button. | No default | |
| ||
stringAccessible name of the close button. Translate it on Arabic pages. | "Remove" | |
| ||
Also accepts the props of the element it renders.
Deviations from DGA
| Change | Reason |
|---|---|
--tag-background-on-color (light) and 1 more | 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 | 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 | Removable filter tags need a real button for keyboard and screen-reader users. |
Status Tag: ghost and dot | Ghost tags would otherwise all look the same; the dot is decorative and the label carries the status. |
Contrast
248 pairs checked · all pass WCAG 2.1 AAShow 42 statesHide
| Variant / state | Light | Dark |
|---|---|---|
| neutral / filled | 13.91:1 AAA | 11.57:1 AAA |
| neutral / filled (icon) | 17.31:1 3:1 | 12.71:1 3:1 |
| neutral / outlined | 13.91:1 AAA | 14.45:1 AAA |
| neutral / outlined (icon) | 17.31:1 3:1 | 15.87:1 3:1 |
| status neutral / subtle | 13.91:1 AAA | 11.57:1 AAA |
| status neutral / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status neutral / ghost (dot) | 17.31:1 3:1 | 15.87:1 3:1 |
| status neutral / inverted | 7.36:1 AAA | 7.66:1 AAA |
| success / filled | 7.55:1 AAA | 7.88:1 AAA |
| success / filled (icon) | 7.55:1 3:1 | 7.88:1 3:1 |
| success / outlined | 7.62:1 AAA | 10.80:1 AAA |
| success / outlined (icon) | 7.62:1 3:1 | 10.80:1 3:1 |
| status success / subtle | 7.55:1 AAA | 7.88:1 AAA |
| status success / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status success / ghost (dot) | 7.62:1 3:1 | 10.80:1 3:1 |
| status success / inverted | 5.69:1 AA | 8.72:1 AAA |
| info / filled | 7.61:1 AAA | 7.49:1 AAA |
| info / filled (icon) | 7.61:1 3:1 | 7.49:1 3:1 |
| info / outlined | 7.83:1 AAA | 9.88:1 AAA |
| info / outlined (icon) | 7.83:1 3:1 | 9.88:1 3:1 |
| status info / subtle | 7.61:1 AAA | 7.49:1 AAA |
| status info / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status info / ghost (dot) | 7.83:1 3:1 | 9.88:1 3:1 |
| status info / inverted | 4.56:1 AA | 9.24:1 AAA |
| warning / filled | 7.20:1 AAA | 8.57:1 AAA |
| warning / filled (icon) | 7.20:1 3:1 | 8.57:1 3:1 |
| warning / outlined | 7.19:1 AAA | 11.30:1 AAA |
| warning / outlined (icon) | 7.19:1 3:1 | 11.30:1 3:1 |
| status warning / subtle | 7.20:1 AAA | 8.57:1 AAA |
| status warning / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status warning / ghost (dot) | 7.19:1 3:1 | 11.30:1 3:1 |
| status warning / inverted | 5.42:1 AA | 9.32:1 AAA |
| error / filled | 7.96:1 AAA | 7.04:1 AAA |
| error / filled (icon) | 7.96:1 3:1 | 7.04:1 3:1 |
| error / outlined | 8.29:1 AAA | 9.01:1 AAA |
| error / outlined (icon) | 8.29:1 3:1 | 9.01:1 3:1 |
| status error / subtle | 7.96:1 AAA | 7.04:1 AAA |
| status error / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status error / ghost (dot) | 8.29:1 3:1 | 9.01:1 3:1 |
| status error / inverted | 4.83:1 AA | 9.68: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