Buttons

All the buttons!

Colors

Normal action Dangerous action Exciting action Cautious action Disabled action
<span role="button" class="Button">Normal action</span>
<span role="button" class="Button Button--red">Dangerous action</span>
<span role="button" class="Button Button--orange">Exciting action</span>
<span role="button" class="Button Button--yellow">Cautious action</span>
<span role="button" class="Button Button--disabled">Disabled action</span>

Sizes

Large button Normal button Small button
<span role="button" class="Button Button--large">Large button</span>
<span role="button" class="Button">Normal button</span>
<span role="button" class="Button Button--small">Small button</span>

Shapes

Solid button Outline button Text-only button
<span role="button" class="Button">Solid button</span>
<span role="button" class="Button Button--outline">Outline button</span>
<span role="button" class="Button Button--text">Text-only button</span>

Widths

Normal width

Full-width block button

<span role="button" class="Button">Normal width</span>
<span role="button" class="Button Button--block">Full-width block button</span>