Buttons

Styles

Default Button Primary Button Danger Disabled 
<span role="button" class="Button">Default Button</span>
<span role="button" class="Button Button--primary">Primary Button</span>
<span role="button" class="Button Button--danger">Danger</span>
<span role="button" class="Button Button--disabled">Disabled</span>
Dark Button
Light Button 
<span role="button" class="Button Button--dark">Dark</span>
<span role="button" class="Button Button--light">Light</span>

Tags

Positive Tag Button Negative Tag Button 
<span role="button" class="Button Button__tag Button__tag">Positive Tag Button</span>
<span role="button" class="Button Button__tag Button__tag--negative">Negative Tag Button</span>

Sizes

Hero Size Default Size Compact Size 
<span role="button" class="m-bottom-2 Button Button--hero">Hero Size</span>
<span role="button" class="Button">Default Size</span>
<span role="button" class="Button Button--compact">Compact Size</span>

Shapes

Default Shape Text Shape 
<span role="button" class="Button">Default Shape</span>
<span role="button" class="Button Button--text">Text Shape</span>

Widths

Default Width Block Width 
<span role="button" class="Button">Default Width</span>
<span role="button" class="Button Button--block">Block Width</span>