Tags
#
OverviewA tag represents a set of keywords or attributes that help label, organize and categorize objects.
#
Design Guidelines#
Use when- To add attributes to, and remove attributes from, an object.
- To filter objects by attribute.
- To apply or remove multiple attributes to an object.
#
Don't use when- You are trying to convey a status. Instead use Badge
#
Behaviour- A user can search for, and add one or multiple tags using the Input component.
- A user can add one or multiple tags to an object by making a selection from a list.
- A user can remove a tag using an "X".
- A user can click on a tag to filter by that particular categorization or label.
#
Editorial- Tags should only contain a single word.
- Avoid icons with the exception of "X" to remove.
#
Visual Style- Always use the default component style for static tags.
- Always use the blue clickable component style for interactive tags.
- Always use the checked and unchecked component when the user can make multiple selections.