Skip to content

Token

Alpha

A Token represents a piece of data. They are typically used to show a collection of related attributes.

The default Token can be used for most cases, but specialized token components are provided for specific use cases (see below for more info).

All types of tokens may have the same interactive qualities as links or buttons. They also have a sense of being "selected" and ready for user interaction such as being removed from a collection.

Basic Example

Interactive tokens

If any token is interactive (it is a link or a button), it will become focusable, and react to being hovered or focused on.

If a token is interactive and has a remove button (appears when passing onRemove), the remove button should not get focus. To invoke the onRemove callback without using the cursor, press 'Backspace' when the token is focused.

These rules apply to all token components mentioned in this document.

Example: Interactive tokens with and without an onRemove prop

Token

The default Token component

Component Props

Token

PropTypeDefaultDescription
text RequiredstringThe text label inside the token
id string | numberA unique identifier that can be associated with the token
as "a" | "button" | "span"
size TokenSizeKeysmediumWhich size the token will be rendered at
sx SystemStyleObject
leadingVisual anyA function that renders a component before the token text
onRemove () => voidThe function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
isSelected booleanWhether the token is selected
hideRemoveButton booleanWhether the remove button should be rendered in the token

Example

IssueLabelToken

Tokens that represent Issue labels should use the IssueLabelToken component.

Component Props

IssueLabelToken

PropTypeDefaultDescription
text RequiredstringThe text label inside the token
id string | numberA unique identifier that can be associated with the token
as "a" | "button" | "span"
size TokenSizeKeysmediumWhich size the token will be rendered at
onRemove () => voidThe function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
isSelected booleanWhether the token is selected
fillColor string#999The color that corresponds to the label
hideRemoveButton booleanWhether the remove button should be rendered in the token

AvatarToken

Tokens that represent GitHub users should use the AvatarToken component.

Component Props

AvatarToken

PropTypeDefaultDescription
text RequiredstringThe text label inside the token
avatarSrc Requiredstring
id string | numberA unique identifier that can be associated with the token
as "a" | "button" | "span"
size TokenSizeKeysmediumWhich size the token will be rendered at
onRemove () => voidThe function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
isSelected booleanWhether the token is selected