+button-standard Standard button | +button-standard(href='#foo') Standard link button
+button-primary Primary button | +button-primary(href='#foo') Primary link button
+button-secondary Secondary button | +button-secondary(href='#foo') Secondary link button
+button-important Important button | +button-important(href='#foo') Important link button
+button-critical Critical button | +button-critical(href='#foo') Critical link button
+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
+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
+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
+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
+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
+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
Inline container displays the button in an inline fashion, with 12px margin to the betweeen each button pair.
+buttons('inline')
+button-primary Foo button
+button-important Bar button
+button-standard(href='foo') Ham link buttonExpand forces the buttons to conusme the entire width of the parent container, with a 12px margin between buttons.
+buttons('expanded')
+button-primary Foo button
+button-important Bar button
+button-standard(href='#') Ham link buttonA 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.
+button-primary.has-busy.is-auto Auto busy | +button-important.has-busy.manual Manual busy | +button-secondary.has-busy.manual Manual busy
+button-standard(disabled=true) I'm disabled | +button-primary.is-disabled(href="#foo") Standard link button