Display
Tag
A subject label — a topic, a technology, a filter facet.
When to reach for it
Several sit together and the reader scans them. One fact about one record is a Badge.
Examples
default
AllTypeScriptRustPhotography
Notes
A subject label — a topic, a technology, a filter facet.
Distinct from Badge, which carries a state or a count. A tag names what something is ABOUT, so several sit together in a row and the reader scans them; a badge is one fact about one record.
Presentational on purpose. To make a tag filter a list, wrap it in a button or a link at the call site and pass active — that keeps the focus ring, the pressed state and the keyboard handling with the element that actually owns them.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| active | boolean | false | Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. |
Also accepts everything in HTMLAttributes<HTMLSpanElement>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- Presentational. To filter with it, wrap it in a button and pass active, so the focus ring and the pressed state stay with the element that owns them.