Token

Token is a compact representation of an object, and is typically used to show a collection of related metadata.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Figma

View in Figma|

Token

React examples

Default

token

<Token text="token" />

<Token text="token" />

With a button to remove the token

token (press backspace or delete to remove)

<Token
  text="token"
  onRemove={() => {
    alert('Fake remove callback')
  }}
/>

<Token
  text="token"
  onRemove={() => {
    alert('Fake remove callback')
  }}
/>

Interactive

Interactivity guidelines

<Token
  as="button"
  onClick={() => {
    alert('Fake onClick callback')
  }}
  text="Token as <button>"
/>

<Token
  as="button"
  onClick={() => {
    alert('Fake onClick callback')
  }}
  text="Token as <button>"
/>

Custom size

Use consistent token sizes to maintain visual hierarchy. Avoid using multiple sizes in a single group.

smallmediumlargexlarge

<Stack direction="horizontal" align="center">
  <Token text="small" size="small" />
  <Token text="medium" size="medium" />
  <Token text="large" size="large" />
  <Token text="xlarge" size="xlarge" />
</Stack>

<Stack direction="horizontal" align="center">
  <Token text="small" size="small" />
  <Token text="medium" size="medium" />
  <Token text="large" size="large" />
  <Token text="xlarge" size="xlarge" />
</Stack>

With a leading visual

token

<Token text="token" leadingVisual={GitBranchIcon} />

<Token text="token" leadingVisual={GitBranchIcon} />

Issue label token

React

readyNot reviewed for a11y

Storybook|Source

Figma

Source

The IssueLabelToken component is used to render GitHub issue labels.

It has all of the same functionality as a Token except:

it accepts a fillColor prop to set a color for the token
it does not accept a leadingVisual prop

React examples

Default

good first issue

<IssueLabelToken text="good first issue" />

<IssueLabelToken text="good first issue" />

Custom color

good first issue

<IssueLabelToken text="good first issue" fillColor="#8c50c8" />

<IssueLabelToken text="good first issue" fillColor="#8c50c8" />

Props

Token

Name	Default	Description
leadingVisual		`React.ComponentType<React.PropsWithChildren<any>>` A function that renders a component before the token text
text Required		`string` The text label inside the token
as	`'span'`	`'button' \| 'a' \| 'span'`
onRemove		`() => void` The function that gets called when a user clicks the remove button, or keys `Backspace` or `Delete` when focused on the token
hideRemoveButton		`boolean` Whether the remove button should be rendered in the token
isSelected		`boolean` Whether the token is selected
id		`number \| string` A unique identifier that can be associated with the token
size		`'small' \| 'medium' \| 'large' \| 'xlarge'` Which size the token will be rendered at
sx		`SystemStyleObject`

IssueLabelToken

Name	Default	Description
fillColor		`string` The color that corresponds to the label
text Required		`string` The text label inside the token
as	`'span'`	`'button' \| 'a' \| 'span'`
onRemove		`() => void` The function that gets called when a user clicks the remove button, or keys `Backspace` or `Delete` when focused on the token
hideRemoveButton		`boolean` Whether the remove button should be rendered in the token
isSelected		`boolean` Whether the token is selected
id		`number \| string` A unique identifier that can be associated with the token
size		`'small' \| 'medium' \| 'large' \| 'xlarge'` Which size the token will be rendered at
sx		`SystemStyleObject`

AvatarToken

Name	Default	Description
avatarSrc		`string`
text Required		`string` The text label inside the token
as	`'span'`	`'button' \| 'a' \| 'span'`
onRemove		`() => void` The function that gets called when a user clicks the remove button, or keys `Backspace` or `Delete` when focused on the token
hideRemoveButton		`boolean` Whether the remove button should be rendered in the token
isSelected		`boolean` Whether the token is selected
id		`number \| string` A unique identifier that can be associated with the token
size		`'small' \| 'medium' \| 'large' \| 'xlarge'` Which size the token will be rendered at
sx		`SystemStyleObject`