Tag

Tags help people filter content or see metadata at a glance.

Guidelines

Tags aren't buttons

Tags and buttons are similar; they both provide visual cues to prompt users to take actions and make selections.

However, while buttons are expected to appear consistently and with familiar calls to action, tags should be dynamic to the situation, and appear as a group of interactive or static elements.

Use tags to enhance the user's current journey and encourage action, and buttons to progress through the product and take significant actions.

Filled Tags

Filled tags have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.

Filled

Outline Tags

Outline tags are used for secondary actions on a page, like Cancel or Close. They should be used for actions that are less important than the primary action on the page.

Outlined

Square Tags

Sqaure tags are used for actions that are used as an alternate themed Default.

Square

Pill Tags

Pill tags are used for actions that are used as an alternate themed Default.

Pill

Closable Tags

Closable tags are used for actions that are used as an alternate themed Default.

Closable

Responsive Layouts

When scaling layouts for large screen devices, tags can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.