Tag

Tags are used to label, categorize, or indicate the status of an item.

Usage

Use the .Tag class with a variant modifier.

<span class="Tag success">Active</span>
<span class="Tag danger">Blocked</span>

Variants

Semantic variants:

• success: Positive or active status.
• danger: Error or blocked status.
• warning: Caution or pending status.
• info: Informational status.

Brand variants:

• primary: Primary brand color.
• accent: Accent brand color.

Example

Dot Modifier

Add .dot to prepend a colored circle indicator before the label text.

<span class="Tag success dot">Active</span>
<span class="Tag danger dot">Blocked</span>

Size

Use .compact for a smaller tag.

<span class="Tag success compact">Active</span>