Skip to main content

Tag

Offers a label that can optionally be selected and unselected or removed.

Structure​

  • Label: Describes tag meaning
  • Count: Optionally counts number of items in a filter
  • Remove Icon: Optionally gives the option to remove the tag

Guidelines​

When to use​

  • To show selected options that can be added and removed.
  • To add interactive labels.

When not to use​

  • For static labels—use a badge.
  • For actions that affect anything else—use a button.

Behaviour​

Use to organize content​

Tags work well at displaying organization in a small space. Use them to show labels, categories, and other taxonomy to show the structure of your content.

Use to filter searches​

With small screens, you don’t want to take up a lot of space with all of the options for filtering search results. Use tags to add progressive disclosure to your filters.

Tags allow you to show the category of filter in a small space. Their state lets users quickly see if the filter is applied and clear it.

Tags allow you to show the category of filter in a small space. Their state lets users quickly see if the filter is applied and clear it.

Keep it simple​

Tags are small and can’t contain much information. They’re great for organizing and providing cues for what’s been selected. But you can’t fit a lot into that space.

If you have more information to display, use another component.

It’s also best to avoid cluttering up tags with too many visual cues. Unless it’s necessary, try to keep tags as text only.

Content​

Accessibility​

TODO

Add accessibility requirements and considerations.