import {Avatar, Stack, Token} from '@primer/react-brand'Use Token to display compact metadata that describes or supports adjacent content, such as a category, status, date, author, or related topic. Keep it visually attached to the content it describes, and follow each compound component’s documented child API rather than inserting Token directly.
Keep Token content short and easy to scan. A single word is ideal. Two short words are acceptable when the category or type needs more context.
Examples
Default
Variants
Interactive tokens
When the entire Token should act as a link, render it as an anchor. Use interactive Tokens for secondary navigation, filters, or related metadata links. Do not use Tokens as primary calls to action.
Use as="a" when the whole Token should act as a link.
Leading visual
Use a leading visual when it helps users scan the Token more quickly. Octicons, logos, and small square avatars work well here. Keep the visual decorative and compact.
Component props
Token
| name | type | default | required | description |
|---|---|---|---|---|
as | 'span', 'a' | 'span' | false | The HTML element rendered by Token |
leadingVisual | ReactElement | undefined | false | The leading visual appears before the Token content |
variant | 'default''accent''outline''invisible' | 'default' | false | The variant variations available in Token |
href | string | undefined | false | Anchor destination when as="a" |