Tags
A tag labels UI objects for quick recognition and navigation. With the option to have a leading icon, trailing icon, and dismissable. They are used to show things like active filters or options.
For more information about supported prefixIcons, check the Icons page.
Tags with all icons enabled
Primary
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outlined
Large (lg)
Medium (md)
Small (sm)
Greyscale
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outline
Large (lg)
Medium (md)
Small (sm)
Tags without Icons
Primary
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outlined
Large (lg)
Medium (md)
Small (sm)
Greyscale
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outline
Large (lg)
Medium (md)
Small (sm)
Tags With Custom Prefix Icons
Primary
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outlined
Large (lg)
Medium (md)
Small (sm)
Greyscale
Bold
Large (lg)
Medium (md)
Small (sm)
Subtle
Large (lg)
Medium (md)
Small (sm)
Outline
Large (lg)
Medium (md)
Small (sm)
Tags in a row
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3
Filter Item #1
Filter Item #2 with pretty long title
Filter Item #3
Filter Item #3