<!-- Default tag -->
<span class="mdst-tag">Tag</span>

<!-- Variants -->
<span class="mdst-tag mdst-tag--solid">Solid</span>
<span class="mdst-tag mdst-tag--subtle">Subtle</span>
<span class="mdst-tag mdst-tag--ghost">Ghost</span>

<!-- Pill shape -->
<span class="mdst-tag mdst-tag--pill">Pill</span>

<!-- Status colors -->
<span class="mdst-tag mdst-tag--success">Active</span>
<span class="mdst-tag mdst-tag--error">Failed</span>
<span class="mdst-tag mdst-tag--muted">Archived</span>

<!-- Status + variant combos -->
<span class="mdst-tag mdst-tag--success mdst-tag--solid">Online</span>
<span class="mdst-tag mdst-tag--error mdst-tag--subtle">Offline</span>

<!-- Sizes -->
<span class="mdst-tag mdst-tag--sm">Small</span>
<span class="mdst-tag mdst-tag--lg">Large</span>

<!-- Dismissible -->
<span class="mdst-tag">
  Label
  <button class="mdst-tag-dismiss" aria-label="Remove">&times;</button>
</span>