Skip to main content

Button

Colors#


<div>
<button class="button button--primary">Primary</button>
<button class="button button--secondary">Secondary</button>
<button class="button button--success">Success</button>
<button class="button button--info">Info</button>
<button class="button button--warning">Warning</button>
<button class="button button--danger">Danger</button>
<button class="button button--link">Link</button>
</div>

Outline#


<div>
<button class="button button--outline button--primary">Primary</button>
<button class="button button--outline button--secondary">Secondary</button>
<button class="button button--outline button--success">Success</button>
<button class="button button--outline button--info">Info</button>
<button class="button button--outline button--warning">Warning</button>
<button class="button button--outline button--danger">Danger</button>
</div>

Active#


<div>
<button class="button button--outline button--active button--primary">
Primary
</button>
<button class="button button--outline button--active button--secondary">
Secondary
</button>
<button class="button button--outline button--active button--success">
Success
</button>
<button class="button button--outline button--active button--info">
Info
</button>
<button class="button button--outline button--active button--warning">
Warning
</button>
<button class="button button--outline button--active button--danger">
Danger
</button>
<button class="button button--outline button--active button--link">
Link
</button>
</div>

Disabled#


<div>
<button class="button disabled button--primary">Primary</button>
<button class="button disabled button--secondary">Secondary</button>
<button class="button disabled button--success">Success</button>
<button class="button disabled button--info">Info</button>
<button class="button disabled button--warning">Warning</button>
<button class="button disabled button--danger">Danger</button>
<button class="button disabled button--link">Link</button>
</div>

Links#

Links can also be styled as buttons.


<div>
<a class="button button--primary" href="#url">
Primary
</a>
<a class="button button--secondary" href="#url">
Secondary
</a>
<a class="button button--success" href="#url">
Success
</a>
<a class="button button--info" href="#url">
Info
</a>
<a class="button button--warning" href="#url">
Warning
</a>
<a class="button button--danger" href="#url">
Danger
</a>
<a class="button button--link" href="#url">
Link
</a>
</div>

Sizes#


<div>
<button class="button button--sm button--primary">Small Button</button>
<button class="button button--primary">Default Button</button>
<button class="button button--lg button--primary">Large Button</button>
</div>

Block#


<button class="button button--block button--primary">Block Button</button>