Token

Examples

View in Pajamas UI Kit →

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