Button

Plain <button class="sqd-btn"> — no React, no Tailwind. Same tokens, same look.

Variants

<button class="sqd-btn sqd-btn--default">Default</button>
<button class="sqd-btn sqd-btn--secondary">Secondary</button>
<button class="sqd-btn sqd-btn--outline">Outline</button>
<button class="sqd-btn sqd-btn--ghost">Ghost</button>
<button class="sqd-btn sqd-btn--soft">Soft</button>
<button class="sqd-btn sqd-btn--destructive">Destructive</button>
<button class="sqd-btn sqd-btn--coral">Coral</button>
<button class="sqd-btn sqd-btn--link">Link</button>

Sizes

<button class="sqd-btn sqd-btn--default sqd-btn--xs">Extra small</button>
<button class="sqd-btn sqd-btn--default sqd-btn--sm">Small</button>
<button class="sqd-btn sqd-btn--default">Default</button>
<button class="sqd-btn sqd-btn--default sqd-btn--xl">Extra large</button>

Disabled

<button class="sqd-btn sqd-btn--default" disabled>Default</button>
<button class="sqd-btn sqd-btn--outline" disabled>Outline</button>