Buttons

Button

The default button style is white with a dark outline and has a salmon background color on hover. See the modifiers table for more options!

Demo

Markup

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

Modifiers

Modifier †	Behavior
`button--lg`	A larger button.
`button--plain`	Removes the border and background. Good for icons alone.
`button--{ color }`	Loops through Platform UI colors for background and hover coloring.
`button--ghost`	Ghost buttons! 👻

† The base class is always required.

Visualizer

Try this! Check out different colors of buttons!

Secondary

The secondary button was built primarily for usage with icons alone with a fancier hover. It can also be used with text.

Demo

Markup

<button class="button button--secondary"><i class="pi-download"></i></button>

Modifiers

Modifier †	Secondary Modifier	Data Attribute	Behavior
`button--secondary`	`has-text`	`data-button-text`	`data-button-text` adds custom text on hover on viewports over `991px`. Adding `has-text` will show that text at all times.

† The base class is always required.

Group

Evenly space any group of buttons, default or secondary.

Demo

Markup

<div class="button-group">
  <button class="button">Cancel</button>
  <button class="button">Continue</button>
  <button class="button">Destroy Death Star</button>
</div>