Button development
Appearance
<button class="button button--default">Default</button>
<button class="button button--primary">Primary</button>
<button class="button button--alternative">Alternative</button>
<button class="button button--subtle">Subtle</button>
<button class="button button--success">Success</button>
<button class="button button--danger">Danger</button>
1
2
3
4
5
6
2
3
4
5
6
Size
<button class="button button--default button--size-0">Default</button>
<button class="button button--default button--size-1">Default</button>
<button class="button button--default button--size-2">Default</button>
<button class="button button--default button--size-3">Default</button>
<button class="button button--default button--size-4">Default</button>
1
2
3
4
5
2
3
4
5
Disabled
<button disabled class="button button--default">Default</button>
<button disabled class="button button--primary">Primary</button>
<button disabled class="button button--alternative">Alternative</button>
<button disabled class="button button--subtle">Subtle</button>
<button disabled class="button button--success">Success</button>
<button disabled class="button button--danger">Danger</button>
1
2
3
4
5
6
2
3
4
5
6
Loading
<button class="button button--loading button--default">Default</button>
<button class="button button--loading button--primary">Primary</button>
<button class="button button--loading button--alternative">Alternative</button>
<button class="button button--loading button--subtle">Subtle</button>
<button class="button button--loading button--success">Success</button>
<button class="button button--loading button--danger">Danger</button>
1
2
3
4
5
6
2
3
4
5
6
Icon & text
<button class="button button--primary">
<!--icon here-->
</button>
1
2
3
2
3
Icon first
<button class="button button--primary button--icon-first">
<!--icon here-->
</button>
1
2
3
2
3
Icon only
<button class="button button--icon-only button--size-3 button--default">
<!--icon here-->
</button>
1
2
3
2
3