Tag
A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task.
Tags create a visual pattern that lets people know they can change or remove the selection. To show system-generated data that people can’t change, use a badge instead.
Resources
Types
Tag
Use a tag when you only need to provide information and when the only possible action is dismissal.
Interaction tag
Use an interaction tag when you can provide more information or actions related to what the tag represents.
Behavior
Dismissal
Both tag types are optionally dismissible. Enable dismissal actions to let people undo their choices. For example, selecting the dismiss action on a category tag in a Planner task clears the selection and removes the tag from view.
Non-dismissible tags communicate that a selection is not editable in the current context. Use them to continue the visual pattern that people can change the selection when they enter an editable state.
Interaction tag primary and secondary actions
In addition to dismissibility, interaction tags can have one other action. Don’t include actions that may be irrelevant or disruptive to the task at hand. The primary action should directly relate to the object the tag represents. For example, selecting a tag that represents a person might open a popover that shows more information about that person.
The secondary action in an interaction tag is always dismiss.
Reflow and overflow
By default, tags will reflow onto the next line if they can’t fit the container.
Optionally, you can include an overflow tag by using a tag of the same size and changing the primary text to +n, where n is the number of tags not displayed.
Tags that represent overflow must be interaction tags, so that people can interact to get more information.
Tags with wrapping behavior
Tags with overflow behavior
Consider a person’s goals when applying reflow and overflow behavior. For example, if it’s helpful for someone to see a list of tags to edit or remove them, make sure they wrap so all tags are visible.
Layout
Minimally, there should be 4 pixels of space between extra small tags, 6 pixels between small tags, and 8 pixels between medium tags.
Read the layout and spacing guidelines to learn how to appropriately apply space around tags.
Medium
Small
Extra small
Accessibility
Tag interaction states
By default, tags have no interaction states and are static elements. If optional dismissibility is enabled, hover and focus states will also be enabled on the entire tag container.
Because interaction tags always have available actions, their interaction states are always enabled.
Truncation
Don’t truncate tag content. It’s important for people to understand at a glance what the tag represents so they can know how to interact with it.
Content
Tag text and validation
Minimally, tags require text content. You should never have to create the text string in tags. In most cases, tag content comes from an entry in a back-end database that matches the information someone enters.
Sometimes, what someone enters won’t match anything in the back-end database. In these cases, the tag can display the input exactly. For example, an external email address may not be in the back-end database.
Show the most important info
Tags can include primary and secondary content. Make sure tags display relevant information. For example, if someone starts a chat by entering an alias in the search bar, the tag that displays should be the recipient’s name, not their alias.
Use the tag for the main info
Irrelevant info in tags makes them hard to scan