Button

HTML

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 - -