# Tag

> Tag components in Flowkit

## Class Naming

Tags are compact UI elements used to label, categorize, or link to related content. They use a simplified button-like styling and are often inline or grouped below posts, cards, or featured content.

The base class is: <span class="sg-selector sg-class">tag</span>

**Size Modifiers:**

* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>

**Surface Modifiers:**

* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-primary
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-tertiary
  </span>