skip to content
  • Calendar
  • Maps



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.


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.