Build · New
Tag
Labels something with a status or category (Paid, Pending, Overdue). Not interactive: never make it look clickable.
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/tagUsage
import { Tag } from "@/components/ui/tag";<Tag color="success" iconLeading={CheckCircleIcon}>Paid</Tag>Examples
Colors, styling and sizes
Five colors in subtle and solid styling, two sizes, an icon at the start or the end, or a flag with flag.
API reference
Tag
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Figma's Label: the word carries the status, not the color. | |
color | "gray" | "brand" | "success" | "warning" | "error" | "gray" | Figma's Color. |
styling | "subtle" | "solid" | "subtle" | Figma's Styling. |
size | "sm" | "md" | "md" | Figma's Size. |
iconLeading / iconTrailing | IconComponent | Figma's Style = Leading icon / Trailing icon. | |
flag | string | Figma's Style = Flag: a country code (needs @kanz/flags). |
Accessibility
ARIA
- Plain text, read with its surroundings; the icons and the flag are decorative.
- Don't rely on color alone.
Arabic and RTL notes
Mirrors
- The leading icon and the flag sit at the inline start (the right), the trailing icon at the end.
Does not mirror
- Flags and status glyphs don't mirror.
- Numerals
- Numbers in a tag follow
numeralsthroughformatNumber. - Arabic typography
label-14(label-12at sm) Medium; the tag grows with the taller Arabic line.