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>

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