Display / Tag
Tag
Status labels are strips of washi tape. Removable tags peel off when you dismiss them.
Server ComponentWCAG AASince v0.1
CriticalDispatchedEn routeResolvedUnassignedDotsGrid
Barangay 3Last 24 hoursFire
import { Tag } from "@plop-ui/react";
<Tag status="critical">Critical</Tag>
<Tag tone="mustard" pattern="dots">En route</Tag>
<Tag onRemove={() => clear("brgy-3")}>Barangay 3</Tag>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | Short label. Lettered in Sketchpop, uppercase. |
| className | string | none | — |
| id | string | none | — |
| onRemove | () => void | none | Makes the tag removable: shows an × button and peels the tag off when pressed. |
| pattern | "stripes" | "dots" | "grid" | stripes | Tape print. |
| removeLabel | string | "Remove <label>" | Accessible name of the remove button. |
| seed | string | number | none | Seeds the default tilt. |
| status | "critical" | "dispatched" | "en-route" | "resolved" | "unassigned" | none | Ops status shortcut: sets the tone from the status mapping. The label is still yours to write. |
| tilt | number | a small seeded tilt | Rotation in degrees. |
| tone | "ink" | "periwinkle" | "mint" | "tomato" | "mustard" | "bubblegum" | periwinkle (or the status color when status is set) | Tape color. |
Use it well
DoWrite the status in the label. The color only repeats it.
Don'tUse tags as buttons. Removable tags have a separate × button for that.
Accessibility
- Status is always in the text; the color only repeats it.
- The remove button is named "Remove <label>".
- After removing, focus moves to the next tag (or the previous one).