Sizes

.sm and .lg are contextual modifiers. They set inherited size tokens (--control-size, --variant-font-size, etc.) that components opt into.

Small badge

<div class="sm">
  <button class="btn">Small button</button>
  <span class="badge">Small badge</span>
</div>

Works locally too:

Large badge

<button class="btn sm">Small button</button>
<span class="badge lg">Large badge</span>

Components with bespoke sizing (.avatar, .spinner) define local .sm/.lg instead.