Tag

Button tags are dynamic elements that provide contextualizing information, such as grouping criteria or object metadata. Also they work as clickable components that take the user to a page related to the tag topic. Button tags are primarily used on blog posts.

Label sets the category label of the tags.

When to Use

Use tags to represent categories for contextualizing or categorizing content according to its metadata.

When Not to Use

Don’t use a tag as a component to execute an action or as a filter element for an advanced search. Use a main button or a chip instead.


Variation	Purpose	Style	Sizes
Primary	High emphasis. Use to represent the top level of categories.	Solid	XS, SM
Secondary	Medium emphasis. Use to represent a secondary (extra) level of categories.	Outlined	XS, SM

Solid

Use the solid style for the main tags and primary categories.

Outlined

Use the outlined style for secondary or supportive tags and sub-categories.

Spacing

Use a tag container to add standard spacing between tags. Ensure that proper space is given between each tag when placed next to each other. The standard distance between tags in groups is 8px. If there is more than one row of tags, the distance between tag rows is 12px.

Hierarchy

A proper hierarchy must be ensured when using tags. Primary tags should be chosen first. Place them at the top of the page or in a section at a higher level of the hierarchy near the content title. When needed, place the secondary tags below the primary tags.

Tags Container Hierarchy Don't — **Don’t** place tags on a blog post below the description in the block to the right of the heading,far from the title.

Alignment

The alignment of tags with their container or in relation to content at the same level of the page, should follow a left-justified pattern. The primary action should flow to the left-most margin of the content area with the secondary actions following below.