Get Orange

A button is an interactive element used to trigger an action.

Roles

HTML

    <button type="button" class="button">Primary</button>
<button type="button" class="button button--secondary">Secondary</button>

Sizes

Out of the box buttons are displayed in basic size. Add a .button--small or .button--large class to change sizes.

HTML

    <button type="button" class="button button--large">
  Large
</button>

<button type="button" class="button">
  Regular
</button>

<button type="button" class="button button--small">
  Small
</button>

Wide

To make a button horizontally fit inside it's parent element add a .button--wide class to it. Buttons of any size and types can be wide.

HTML

    <button type="button" class="button button--large button--wide">Continue<i class="icon-arrow-right"></i></button>

Variants

HTML

    <button type="button" class="button button--basic">Primary basic</button>
<button type="button" class="button button--secondary button--basic">Secondary basic</button>

Icon

Icon only
With an icon

HTML

    <button type="button" class="button button--icon-only"><i class="icon-remove"></i></button>
<button type="button" class="button">Continue<i class="icon-arrow-right"></i></button>

Disabled

HTML

    <button type="button" class="button" disabled="disabled">Can't touch this</button>

Colors

HTML

    <button type="button" class="button button--color-{color}">Button</button>
<button type="button" class="button button--color-{color} button--{role}">Button</button>

Inverted

HTML

    <button type="button" class="button button--color-{color} button--inverted">Button</button>
<button type="button" class="button button--color-{color} button--{role} button--inverted">Button</button>

Usage

Attribute	Description	Possible values	Type	Required	Default
role	Set with `.button--{role}` class	`primary`, `secondary` or `basic`	String	-	primary
icon	Add an icon to a button like `.icon-{icon-name}`	See Icons page	String	-	-
color	Set with `.button--color-{color}`	See Colors page	String	-	primary
size	Set with `.button--{size}`	`small`, `large`	String	-	regular
wide	Make a button of any size horizontally fit inside it's parent element. Set with `.button--wide`	`wide`	String	-	-
invert	Invert a button so it can be placed on a solid color background. Set with `.button--inverted`	`inverted`	String	-	-