Buttons

Colors

Default Button Primary Button Transactional 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--transaction">Transactional</span>
<span role="button" class="Button Button--danger">Danger</span>
<span role="button" class="Button Button--disabled">Disabled</span>

Tags

Tag button Positive Tag Button Negative Tag Button

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

Sizes

Default Size Compact Size

<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>