Component

Button

The main action, with a soft press.

Classes

Class	Type
btn	Component	The button.
btn-sm	Size	Small.
btn-lg	Size	Large.
primary	Color	Indigo by default. Used when you set no color.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.
loading	State	Shows the sweep and a spinner. Put it on with a color, as in btn primary loading.

Colors

<button class="btn primary" type="button"><span>Primary</span></button>
<button class="btn secondary" type="button"><span>Secondary</span></button>
<button class="btn tertiary" type="button"><span>Tertiary</span></button>
<button class="btn neutral" type="button"><span>Neutral</span></button>
<button class="btn success" type="button"><span>Success</span></button>
<button class="btn error" type="button"><span>Error</span></button>
<button class="btn warning" type="button"><span>Warning</span></button>
<button class="btn info" type="button"><span>Info</span></button>

Sizes

Regular is btn alone. btn-sm and btn-lg are the other sizes.

<button class="btn btn-sm" type="button"><span>Small</span></button>
<button class="btn" type="button"><span>Regular</span></button>
<button class="btn btn-lg" type="button"><span>Large</span></button>

Loading and disabled

Use the disabled attribute. Put the words in a span so the press lights stay behind them.

<button class="btn primary loading" type="button"><span>Loading</span></button>
<button class="btn" type="button" disabled><span>Disabled</span></button>

A button with no color class is primary. neutral is a light face with dark text. The other colors are translucent solids.