<!-- Default badge -->
<span class="mdst-badge">3</span>

<!-- Variants -->
<span class="mdst-badge mdst-badge--solid">12</span>
<span class="mdst-badge mdst-badge--subtle">New</span>
<span class="mdst-badge mdst-badge--dot"></span>

<!-- Status colors -->
<span class="mdst-badge mdst-badge--error mdst-badge--solid">5</span>
<span class="mdst-badge mdst-badge--success">✓</span>
<span class="mdst-badge mdst-badge--warning">!</span>
<span class="mdst-badge mdst-badge--muted">0</span>

<!-- Sizes -->
<span class="mdst-badge mdst-badge--sm">3</span>
<span class="mdst-badge mdst-badge--lg">12</span>

<!-- Positioned on an element -->
<div style="position: relative; display: inline-flex;">
  <button class="mdst-button">Inbox</button>
  <span class="mdst-badge mdst-badge--solid mdst-badge--error mdst-badge--top-right">7</span>
</div>

<!-- Dot indicator -->
<span class="mdst-badge mdst-badge--success mdst-badge--dot"></span>