Use Tag to identify topic, type, or metadata classification.
Tag
Category marker for topics, taxonomies, and optional linked labels.
TypeScript
Open source
Figma
CSS
- .source-tag Root element (`span` or `a`)
- data-palette Visual intent
Design intent
Tag labels static taxonomy. It classifies an item but does not invite interaction. For interactive filtering use Chip, for status use Badge. Tags are most effective in sets of two to five on a single item; beyond that, the visual cost outweighs the information gain.
Semantic palettes
Neutral
Accent
Success
Warning
Danger
Info
Categorical palettes
Use these when you need color to differentiate categories rather than signal status — topic tags, type labels, or any taxonomy where the color itself encodes identity, not severity.
Blue
Green
Red
Orange
Yellow
Pink
Purple
Teal
When to use
Do
Use link tags when they navigate to a filtered listing.
Keep tag text concise so clusters remain scannable.
Don't
Do not use Tag for pressable filter behavior. Use Chip.
Do not use Tag for persistent state markers. Use Badge.
Designer checklist
- Tag labels are short, one to three words maximum.
- Tags are not interactive. If a tag can be removed or toggled, use Chip instead.
- Color palette is used for meaning, not decoration.
- No more than five or six tags on a single item before truncation or collapsing.
Props
PropTypeDefaultDescription
childrenReactNoderequiredTag label.
palette`neutral \| accent \| success \| warning \| danger \| info \| blue \| green \| red \| orange \| yellow \| pink \| purple \| teal`neutralSemantic or categorical color intent.
tonesame as `palette`nullDeprecated alias kept for backward compatibility.
hrefstringnullIf set, renders an anchor.
externalbooleanfalseApplies secure new-tab behavior when `href` is set.
classNamestringnullExtra class on root.
Usage
import { Tag } from '@pierredelattre/source-react';
Design
React
Accessibility Component tokens
TokenDefault
--tag-bgtransparent
--tag-color--color-text-secondary
--tag-border-color--color-border-strong
--tag-border-color-hover--color-text
--tag-padding-x0.5rem
--tag-padding-y0.1875rem
--tag-font-size--text-xs
--tag-radius--radius-full
Accessibility
Use plain text labels. If tags are links, they are keyboard-focusable and support standard anchor behavior.