Tag

cds-tag

The Tag component is used to display concise, actionable information in the interface. It is designed to be visually distinct, making it easy for users to identify and interact with. Tags are clickable, allowing users to take immediate action, such as navigating to a specific page or filtering content.

Default

• Variant: --primary
• Size: --medium

Default badge

<button class="cds-tag">
  <span class="cds-tag__text">Default tag</span>
  <button class="cds-tag__close"></button>
</button>

---

Elements

Element	Code	Parent	HTML tag	Required
Text	cds-tag__text	Block: cds-tag	<span>	required
Close	cds-tag__close	Block: cds-tag	<button>	optional

<button class="cds-tag">
  <span class="cds-tag__text">Default tag</span>
</button>

---

Modifiers

Modifier	Options
Variant	--accent, --primary, --secondary, --inverse
Size	--small, --medium
Alt color	--color-1, --color-2, --color-3 ... --color-10

---

Variant

<button class="cds-tag cds-tag--accent">
  <span class="cds-tag__text">Accent tag</span>
  <button class="cds-tag__close"></button>
</button>

Size

<button class="cds-tag cds-tag--small">
  <span class="cds-tag__text">Small tag</span>
  <button class="cds-tag__close"></button>
</button>

Alternative colors

<button class="cds-tag cds-tag--color-2">
  <span class="cds-tag__text">Color 2</span>
  <span class="cds-tag__close"></span>
</button>

---

States

Modifier	Options
States	is-highlighted

Is highlighted

Example

<button class="cds-tag cds-tag--color-2 is-highlighted">
  <span class="cds-tag__text">Color 2</span>
</button>