Buttons

Use btn with a tone class. Reserve the filled persimmon style for the page's primary action. Utilities can override the defaults, as in btn btn-primary w-full.

Tones

HTML

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-soft">Soft</button>
<button type="button" class="btn btn-outline">Outline</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-soft-danger">Soft danger</button>
<button type="button" class="btn btn-danger">Danger</button>

Sizes and states

Use the default size for form submissions and page actions. Choose btn-sm for inline actions such as "Resend code". Disabled buttons fade and ignore hover.

HTML

<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-soft btn-sm">Small</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>

With icons

Match the padding beside the icon to the vertical padding. Use btn-icon for a square button with a 48px touch target. Give it an aria-label that names the action.

HTML

<button type="button" class="btn btn-primary pl-2"><svg viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0"><path d="M8 3a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 8 3Z" /></svg> New item</button>
<button type="button" class="btn btn-outline pr-2">Continue <svg viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0"><path d="M6.47 3.97a.75.75 0 0 1 1.06 0l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 1 1-1.06-1.06L9.44 8l-2.97-2.97a.75.75 0 0 1 0-1.06Z" /></svg></button>
<button type="button" class="btn btn-ghost btn-icon" aria-label="Close"><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" /></svg></button>

Rules

Use one filled primary button per page or dialog. Keep secondary actions lower in contrast.

Use btn-soft-danger for destructive actions. Choose btn-danger when deletion is the main action.

Use <a> for navigation, even when styled as a button.

Keep the focus ring provided by the theme.