Token

A token represents a keyword used to add or filter objects.

Examples

base-token--default
Loading story...
base-token--view-only
Loading story...
base-token--with-avatar
Loading story...

View in Pajamas UI Kit →

Structure

Numbered diagram of a token structure
  1. Container: Wraps the content.
  2. Avatar (optional): Prefixes the text for a user, project, or group.
  3. Text: Represents the query.
  4. Remove button (optional): Permanently removes the token.

Guidelines

When to use

  • In a search query where the user is expected to include multiple queries.
  • To represent dynamic user input in a filter and verify the input by converting the text into a token.
  • Allow a user to manage, filter, and search in a compact area.

When not to use

  • If you need to categorize an object, use a label instead.
  • To highlight more generic object metadata that is system-generated, use a badge instead.

Variants

  • Interactive: Include a close icon at the end of the token. When enabled, a user can click the icon to remove the token from the set.
  • View-only: Can't be removed.
  • Avatar: When querying for a user, project, or group, an avatar token should be used. These can be either interactive or view-only.

Placement

  • A token can be positioned inline with the text cursor in a field, or in a stacked list.
  • A token can wrap to a new row.

Behavior

A token can be used to both add and filter content where:

  • An input token adds content in the form of an attribute attached to another object.
  • A filter token narrows down content and is attached to a qualifier. The filter inherits a filter token.

Accessibility

TODO:
Add accessibility requirements and considerations. Create an issue

Last updated at: