Buttons

Styled button and link variants for actions and navigation.

Variants

Apply .button to links or buttons. Add .button--accent for emphasis.

Code

<button class="button">Default</button>
<a href="#" class="button button--accent">Accent</a>

Ghost buttons

Use .button--ghost for a quiet action without a fill. Add .button--accent for accent text that looks like a link, with the same button padding and focus outline. Accent text is mixed toward the scheme foreground for contrast.

Code

<button class="button button--small button--ghost" type="button">Cancel</button>
<a class="button button--small button--ghost button--accent" href="/manual/components/inline-edit.html">Edit</a>
Edit

Keep native semantics: buttons perform actions and links navigate. Compact inline Edit progressively enhances its native form link.

Sizes

Use .button--small or .button--large to adjust scale.

Code

<a href="#" class="button button--small">Small</a>
<a href="#" class="button">Default</a>
<a href="#" class="button button--large">Large</a>

With icon

Add .with-icon and an .icon image inside the button.

Code

<a href="#" class="button with-icon">
  <img src="icon.svg" class="icon" /> Label
</a>

Button group

Wrap buttons in .button-group to join them visually.

Code

<div class="button-group">
  <a href="#" class="button">One</a>
  <a href="#" class="button">Two</a>
  <a href="#" class="button">Three</a>
</div>
One Two Three