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 has-text with data-button-text adds custom text on hover.

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>