Token

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

Page navigation navigation

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

Loading data for token...