Tag

Components

Tag

Tags are elements that we use to list attributes or to display active filters.

Preview

Figma

Uses

When to use

Use tags when content is assigned to multiple categories and the user needs a way to differentiate them.

When not to use

Do not use multiple types of emphasis within a user interface. A stronger emphasis is used to denote selected states in many scenarios and may confuse the user.

Do not use too many colors for labels within a user interface. Usually, only one color should be used for the labels. Multiple colors should only be used when they are meaningful to the user.

Behaviour

Action

Text

Icon

Tag Filter

Tag Button

Type

Default

Success

Warning

Error

Info

Icon Right

Size

Small

Medium

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

If the tag has no associated action, it is a normal span element with text inside it that does not have any added functionality for assistive technologies.

If the tag has a filter paper and carries the closing blade, it is a span element with the close icon with role="button"

If the tag has a button role, it carries the role="button" property