Token

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

Page navigation navigation

Tokens are typically used in groups, either as read-only labels or for data entry.

Anatomy

Leading visual (optional): Provides additional context (e.g.: user avatar)
Label (required): Concise text label
Remove button (optional): Removes the token from an editable group of tokens

Interactivity

Tokens are usually interactive, with hover and focus states. They can function like links/buttons but should not replace them.

For removable tokens, users can press "Backspace" or "Delete" to remove. Screen readers should announce these options.

Examples of interactions:

An issue label token that links to a list of issues with that label
A user token that shows a profile summary dialog on hover

When space is limited, like in a table, some tokens in a group may be hidden. The amount hidden tokens is added in a text label, e.g. +3. Make sure to add an accessible label like 3 more tokens to make this screen reader accessible.

It is important to make sure that users can access all tokens in a group, even if they have to navigate to a detail view to see them all.

Tokens as a way to enter information

The TextInputWithTokens component is designed to handle this usage.

TextInputWithTokens inside with an autocomplete menu below it

If tokens are being used for data input, it should be obvious that the user is in an edit or creation context.

Consider pairing with Autocomplete for selection.

The remove button is standard but can be hidden if another method suits the case.

Tokens in inputs can wrap to multiple lines, expanding the input's height. Set a max height if needed; exceeding rows will scroll.