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>