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
|
|
† 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>