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>