A token represents a keyword used to add or filter objects.
- Container: Wraps the content.
- Avatar (optional): Prefixes the text for a user, project, or group.
- Text: Represents the query.
- Remove button (optional): Permanently removes the token.
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.
- 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.
- 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.
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.
TODO:Add accessibility requirements and considerations. Create an issue
Last updated at: