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.




Tag type


Use a tag when you only need to provide information and when the only possible action is dismissal.

Interaction tag type

Interaction tag

Use an interaction tag when you can provide more information or actions related to what the tag represents.



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.

Tag dismissal

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.

Non dismissable tags

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.

Tag action

The secondary action in an interaction tag is always dismiss.

Secondary tag action

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 width wrapping behavior

Tags with wrapping behavior

Tags with overflow 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.


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.

Tag size medium


Tag size small


Tag size extra small

Extra small


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.


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.

Tag truncation


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.

Using the tag for the main info

Use the tag for the main info

Using the tag for irrelevant info

Irrelevant info in tags makes them hard to scan