Buttons

Button components utilizing the @utility btn classes, styled automatically by their parent's color-group.

Primary Group

Danger Group

Usage

buttons.html

<!-- Button Variants -->
<button class="btn btn-solid">Solid</button>
<button class="btn btn-soft">Soft</button>
<button class="btn btn-outlined">Outlined</button>
<button class="btn btn-ghost">Ghost</button>

<!-- Disabled State -->
<button class="btn btn-solid" disabled>Disabled</button>

<!-- Icon Buttons (use 'btn-icon' to make it a perfect square) -->
<button class="btn btn-solid btn-icon" aria-label="Save">
  <Save size={20} />
</button>