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>