Buttons

Buttons are semantic-first in Sprout.

A plain <button> renders as the default primary action. Add classes only when you need a variant or size.

Default

<button>Save changes</button>

Variants

Use variant classes to represent different action types.

<button>Default</button>
<button class="outline">Outline</button>
<button class="ghost">Ghost</button>
<button class="danger">Danger</button>
<button class="success">Success</button>

Sizes

Use .sm or .lg to adjust the button size.

<button class="sm">Small</button>
<button>Default</button>
<button class="lg">Large</button>

Full width

Use .full to make a button expand to the container width.

<button class="full">Continue</button>

Icon buttons

Use .icon for compact icon-only buttons. Always include an accessible label.

<button class="icon" aria-label="Close">✕</button>
<button class="icon ghost" aria-label="More">⋯</button>

Disabled and loading

Use the .loading class while an action is in progress. For a clearer loading state, put a spinner inside the button with status text. The button is non-interactive (pointer-events: none) until you remove the class.

<button disabled>Disabled</button>
<button class="loading" disabled aria-busy="true">
  <span class="spinner sm" aria-hidden="true"></span>
  Saving…
</button>

Using links as buttons

When the action is navigation, use an <a> with role="button". It is styled like a standard link (underline, primary color) but keeps the same padding and min-height so it aligns with real buttons inline.

<a href="/billing" role="button">Go to billing</a>

Go to billing

Usage notes

• A plain <button> represents the primary action.
• Use outline for secondary actions.
• Use ghost for low-emphasis actions.
• Use danger only for destructive actions.
• Use success sparingly for confirmation flows.
• Prefer real <button> elements unless the action is true navigation.