---
name: button
url: /button
---
Button
Basic HTML
You can create buttons with this basic HTML
Colors
You can create buttons of various colors with these classes:
Size
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.
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 !default;
$button-margin: 0 $global-padding $global-padding 0 !default;
$button-style: solid !default;
$button-background: $primary-color !default;
$button-color: auto !default;
$button-radius: 0 !default;
$button-sizes: (
tiny: 0.7,
small: 0.8,
medium: 1,
large: 1.3,
) !default;
$button-font-size: 0.9rem !default;
$button-opacity-disabled: 0.8 !default;
$button-tag-selector: true !default;
$btngroup-background: $primary-color !default;
$btngroup-color: #fff !default;
$btngroup-radius: $button-radius !default;