Buttons

Standard

Toggle source (Jade)
+button-standard Standard button
|  
+button-standard(href='#foo') Standard link button

Primary

Toggle source (Jade)
+button-primary Primary button
|  
+button-primary(href='#foo') Primary link button

Secondary

Toggle source (Jade)
+button-secondary Secondary button
|  
+button-secondary(href='#foo') Secondary link button

Important

Toggle source (Jade)
+button-important Important button
|  
+button-important(href='#foo') Important link button

Critical

Toggle source (Jade)
+button-critical Critical button
|  
+button-critical(href='#foo') Critical link button

Buttons with SVG icons

Toggle source (Jade)
+button-standard
	+icon('lg', 'edit')
	+sprite('web', 'edit')
	| Edit
|  
+button-secondary(href='#')
	+icon('lg', 'edit')
	+sprite('web', 'edit')
	| Email
|  
+button-important(href='#')
	+icon('lg', 'add').is-stroke
	+sprite('web', 'add')
	| Add

Small

Toggle source (Jade)
+button-standard().is-s Small button
|  
+button-standard(href='#foo').is-s Small link button
|  
+button-secondary().is-s Small button
|  
+button-secondary(href='#foo').is-s Small link button

Small with SVG icons

Toggle source (Jade)
+button-standard().is-s
	+icon('lg', 'edit')
	+sprite('web', 'edit')
	| Standard small
|  
+button-standard(href='#foo').is-s
	+icon('lg', 'minus')
	+sprite('web', 'minus')
	| Standard small link

Flat

Toggle source (Jade)
+button-flat().is-s
	| Flat button
|  
+button-flat()(href='#foo').is-s
	| Flat button link
|  
+button-icon('flat')().is-s
	+icon('lg', 'edit').is-inline
	+sprite('web', 'edit').is-inline
	| Flat button with icon
|  
+button-icon('flat')(href='#foo').is-s
	+icon('lg', 'minus').is-inline
	+sprite('web', 'minus').is-inline
	| Flat button link with icon

List buttons with SVG icons

Toggle source (Jade)
+button-list()
	+icon('lg', 'favorite').is-inline
	+sprite('web', 'favorite')
	span First button
+button-list(href='#')
	+icon('lg', 'warning').is-inline
	+sprite('web', 'warning')
	span Second button link

List buttons large with image icons

Toggle source (Jade)
+button-list()
	img(src='//placehold.it/40x40/fca&text=foo')
	span Button single line
+button-list()
	.ui-sprite
	span
		| Button
		span Multi-line
+button-list(href='#')
	img(src='//placehold.it/40x30/acf&text=ham')
	span Link button

Container Inline

Inline container displays the button in an inline fashion, with 12px margin to the betweeen each button pair.

Toggle source (Jade)
+buttons('inline')
	+button-primary Foo button
	+button-important Bar button
	+button-standard(href='foo') Ham link button

Container Expanded

Expand forces the buttons to conusme the entire width of the parent container, with a 12px margin between buttons.

Toggle source (Jade)
+buttons('expanded')
	+button-primary Foo button
	+button-important Bar button
	+button-standard(href='#') Ham link button

Busy

A button with a busy state shows an activity indicator when clicked and blocks any subsequent clicks. An .is-auto state class is available to make a button become busy on its first click.

Toggle source (Jade)
+button-primary.has-busy.is-auto Auto busy
|  
+button-important.has-busy.manual Manual busy
|  
+button-secondary.has-busy.manual Manual busy

Disabled buttons

Toggle source (Jade)
+button-standard(disabled=true) I'm disabled
|  
+button-primary.is-disabled(href="#foo") Standard link button