---
name: button
url: /button
title: Button
---
Button
Basic HTML
You can create buttons with this basic HTML
Colors
You can create buttons of various colors with these classes:
Sizes
You can customize button sizing with these classes:
Disabled Button
Adding a class of .disabled
will disable the pointer & hover state, while also changing the color.
Hollow Buttons
Buttons can be converted to a hollow style with the hollow
class. All of the same coloring and sizing classes will work with it.
Button Groups
Buttons can be turned into button groups which strings buttons together.
Button Group Sizing & colors
Button groups can have sizing modifiers applied straight to the ul.
Button Group Segmented
Button groups can have a segemented look with an active class applied.
Sass Variables
Write a custom button class using our button mixins.
.custom-button {
// Extend the base selector to get core styles
@extend %button;
// Use the size mixin to set a size
@include button-size(
$size: medium, // tiny, small, medium, or large
$expand: false
);
// Use the style mixin to set visual styles
@include button-style(
$background: #fff, // Background color
$color: #000, // Text color
$style: solid // Can be solid or hollow
);
&.custom-disabled {
@include button-disabled;
}
}
Sass Mixins
Buttons can be easily customized using our Sass variables.
$button-padding: 0.85em 1em;
$button-margin: 0 $global-padding $global-padding 0;
$button-style: solid;
$button-background: $primary-color;
$button-color: auto;
$button-radius: 0;
$button-sizes: (
tiny: 0.7,
small: 0.8,
medium: 1,
large: 1.3,
);
$button-font-size: 0.9rem;
$button-opacity-disabled: 0.8;
$button-tag-selector: true;
$btngroup-background: $primary-color;
$btngroup-color: #fff;
$btngroup-radius: $button-radius;