v1.8.12

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 ModifierData AttributeBehavior
button--secondaryhas-textdata-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>