Buttons

Basics

Everybody has seen and interacted with buttons. They're a simple and effective tool, and creating them is simple. Simply apply the .buttonclass to either a button or a link.

<button class="button">Button</button>

As simple as buttons are, there are some rules we need to remember when choosing to use a link or a button:

Use buttons (<button>) for actionable elements that stay on the page
Use links (<a>) for actionable elements that navigate to another page
Do not use empty links (<a href="#">) to fire javascript events.

Static Buttons

By default, buttons are colored according to their theme. Static modifiers color buttons the same way regardless of the element's active theme.

primary

secondary

--severe

--serious

--warning

--okay

--info

Hollow Buttons

These buttons are generally used less often. Their most common use case would place them on top of a banner or another type of image.

primary --hollow

secondary --hollow

--severe --hollow

--serious --hollow

--warning --hollow

--okay --hollow

--info --hollow

Other Modifiers

Modifier	Element	Effect
expanded	.button	Makes a button fill the width of its container.
large	.button	Makes a button larger.