import {Avatar, Stack, Token} from '@primer/react-brand'Token is a compact representation of an object, and is typically used to show a collection of related metadata.
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
Loading
Variants
Loading
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.
Loading
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.
Loading
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''dark-gray''accent''outline''invisible' | 'default' | false | The variant variations available in Token |
href | string | undefined | false | Anchor destination when as="a" |