Tag

Preview

When to use

Use tags to label or categorise items in a compact, inline format. They work well for:

• Displaying the status or category of a product, article, or list item (Read only).
• Showing active applied filters or selections that the user can remove (Dismissible, in a tag group).

Tag group (pattern)

A tag group is a pattern for showing an additive set of applied things.

• Use it when the user can add multiple selections over time (for example filters), and each selection should appear as its own dismissible tag.
• The set is typically dynamic (it grows and shrinks as selections change), not a fixed list of choices.

If you’re presenting a fixed set of choices the user toggles on/off, use Toggle button or Toggle button group instead.

Prefer toggle buttons over a select for quick filters because the options and the current selection stay visible and are faster to change. Use a Select when the option list is long or space is limited.

When not to use

• Don't use tags to convey critical feedback or errors — use a Notification instead.
• Avoid tags when the label is more than two to three words — the text becomes difficult to scan.
• Don't use tags as navigation links. Tags indicate state or category; they don't route the user to a new page.

Behaviour

Read only tags are static — they display information without any interaction.

Dismissible tags show a remove button (×). Activating it removes the tag from the set, typically clearing an active filter or removing one selection.

In CDS, tag groups are used for dismissible tags (applied filters / selections), rather than as a fixed-choice control.

Anatomy

• Container — the pill-shaped background, coloured by the semantic colour variant.
• Label — the tag's text. Should be short and descriptive.
• Remove button (Dismissible only) — a small × icon inside the container that removes the tag.

Variants

Type

• Read only — purely informational. No interaction. Use to indicate status (e.g., "Success", "Warning") on a list item or card.
• Selectable — can be toggled on or off, but is not the recommended choice for filters in CDS. For fixed filter choices, use Toggle button or Toggle button group.
• Dismissible — can be removed by the user. Use for active filters or selected items in a tag group.

Colour — signals semantic meaning for Read only tags:

• Neutral — default; no specific status.
• Success — positive state or outcome (e.g., "Active", "In stock").
• Warning — a condition that needs attention (e.g., "Expiring soon").
• Critical — an error or problematic state (e.g., "Failed", "Out of stock").

Selectable and Dismissible tags use the Neutral colour by default.

States

Placement & layout

Tags sit inline with text or stack horizontally in a group. Use consistent spacing between tags in a group.

In a filter bar, all selectable tags should appear in a single horizontal row where space allows. On narrow viewports, allow wrapping to a second line.

Don't mix Read only and interactive tags in the same group.

Accessibility

• Selectable tags must behave as toggle buttons (role="button" with aria-pressed). Their label should convey what the tag represents.
• Dismissible tags must have an accessible remove button with an aria-label that includes the tag label (e.g., "Remove filter: Free delivery").
• Keyboard users must be able to reach and activate all interactive tags via Tab and Enter or Space.
• Don't rely solely on colour to convey meaning for Read only tags — ensure the label text also communicates the status.

Related components

• Notification — for status messages that need more prominence than a tag.
• Checkbox — for multi-select in a form context, where options need visible labels and explicit form association.
• Select — for choosing from a longer list of options in a form field.