Variants

.solid, .soft, .outline define the visual treatment by setting --ui-bg, --ui-fg, --ui-border (and optionally --ui-hover-bg). Components consume these tokens with sensible fallbacks. .btn and .badge default to .solid. .alert defaults to .soft. .ghost and .link are button-only variants.

Outline success

Solid warning

<button class="btn soft primary">Soft primary</button>
<span class="badge outline success">Outline success</span>
<div class="alert solid warning">Solid warning</div>