Tag

Compact labels for status, categories, and metadata.

Source: src/styles/components/tag.scss
Demo: index.html
JavaScript required: No

---

Basic tag

<span class="dga-tag">Default tag</span>

Preview

Default tag

Use <span class="dga-tag"> — includes a default info icon on the left (LTR) or right (RTL).

---

Variants

data-variant	Color
(default)	Gray
success	Green
info	Blue
warning	Orange

<span class="dga-tag" data-variant="success">Success tag</span>
<span class="dga-tag" data-variant="info">Info tag</span>
<span class="dga-tag" data-variant="warning">Warning tag</span>

Preview

Default tagSuccess tagInfo tagWarning tag

---

Modifiers

Attribute	Effect
data-outline="true"	Outlined border
data-rounded="true"	Pill shape
data-icononly="true"	Circle icon only (no text)

<span class="dga-tag" data-outline="true">Outlined tag</span>
<span class="dga-tag" data-outline="true" data-rounded="true">Rounded outlined</span>
<span class="dga-tag" data-variant="warning" data-rounded="true" data-icononly="true"></span>

Preview

Outlined tagRounded outlined

---

Combined example

<div class="dga-d-flex dga-flex-wrap dga-gap-2 dga-align-items-center">
  <span class="dga-tag" data-outline="true">Outlined tag</span>
  <span class="dga-tag">Default tag</span>
  <span class="dga-tag" data-variant="success">Success tag</span>
  <div class="dga-divider" data-variant="primary" data-direction="v"></div>
  <span class="dga-tag" data-variant="info" data-rounded="true">Info tag</span>
</div>

Preview

Outlined tagDefault tagSuccess tag

Info tag

---

RTL

Icon position flips with [dir="rtl"] on parent or dir="rtl" on the tag.

---

Related

• Divider