Get Orange

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

Roles

HTML

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

Sizes

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

HTML

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

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

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

Wide

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

HTML

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

Variants

HTML

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

Icon

Icon only
With an icon

HTML

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

Disabled

HTML

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

Colors

HTML

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

Inverted

HTML

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

Usage

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