Buttons
Use Figuration's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
Contents
- Examples
- Button Tags
- Outline Buttons
- Sizes
- Icon Button
- Block Buttons
- Active State
- Disabled State
- Checkbox and Radio Input Buttons
- SASS Reference
Examples
Figuration includes a few predefined button styles, each serving its own semantic purpose.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Button Tags
The .btn
classes are designed to be used with the <button>
element. However, you can also use these classes on <a>
or <input>
elements (though some browsers may apply a slightly different rendering).
When using button classes on <a>
elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button"
to appropriately convey their purpose to assistive technologies such as screen readers.
Outline Buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*
ones to remove all background images and colors on any button.
Sizes
Available Sizes
Fancy larger or smaller buttons? Add .btn-xsmall
, .btn-small
, .btn-large
, or .btn-xlarge
for additional sizes.
Icon Button
If a button only contains an icon, you can use .btn-icon
to reduce the horizontal padding
of the button. This will create more of a square button rather than a rectangular one using the default padding.
The icons shown in the examples are from Font Awesome, and not included with Figuration.
Block Buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block
.
Active State
Buttons will appear pressed (with a darker background and border) when active. There’s no need to add a class to <button>
s as they use the :active
pseudo-class. However, you can still force the same active appearance with .active
(and include the aria-pressed="true"
attribute) should you need to replicate the state programmatically.
Outline Buttons:
Disabled State
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element.
Outline Buttons:
Disabled buttons using the <a>
element behave a bit different:
Disabling Anchors
Please refer to the Accessiblity notes about disabled anchors.
Default Primary Secondary Success Info Warning Danger Light Dark Link
Anchor Outline Buttons:Default Primary Secondary Success Info Warning Danger Light Dark
Checkbox and Radio Input Buttons
Figuration’s .btn
styles can be applied to checkbox and radio inputs as well. By using a wrapping .btn-check
class, visually hiding the <input>
with .btn-check-input
, and the sibling selector (~
) to control .btn
styling based on the <input>
’s state.
A single class is used to consolidate layout and behavior of their HTML elements.
The <input>
s and <label>
s are sibling elements as opposed to an <input>
within a <label>
. You will need to use id
and for
attributes to associate the <input>
and <label>
elements.
Checkbox Input Button
Radio Input Buttons
Disabled Input Buttons
Disabled checkboxes and radios are supported, you will need to add the disabled
attribute to the .btn-check-input
. This will also apply the disabled .btn
styling to indicate the input’s state.
Grouped Input Buttons
You can also use .btn-check
s inside a .btn-group
for grouping controls together.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for the button component.
Name | Type | Default | Description |
---|---|---|---|
$enable-btn |
boolean | true |
Enable the generation of the button component classes.
Smaller segements of the button component classes can be disabled with the following $enable-* variables.
|
$enable-btn-default |
boolean | true |
Enable the generation of the default button color variant. |
$enable-btn-colors |
boolean | true |
Enable the generation of the button contextual color variants. |
$enable-btn-outline |
boolean | true |
Enable the generation of the default outline button color variant. |
$enable-btn-outline-colors |
boolean | true |
Enable the generation of the outline button contextual color variants. |
$enable-btn-link |
boolean | true |
Enable the generation of the link button variant. |
$enable-btn-sizes |
boolean | true |
Enable the generation of the button size classes. |
$enable-btn-icon |
boolean | true |
Enable the generation of the icon button classes. |
$enable-btn-icon-sizes |
boolean | true |
Enable the generation of the icon button size classes. |
$enable-btn-bock |
boolean | true |
Enable the generation of the block button variant. |
$enable-btn-check |
boolean | true |
Enable the generation of the checkbox and radio button variant. |
$btn-padding-y |
string | .25em |
Base button vertical padding. |
$btn-padding-x |
string | .75em |
Base button horizontal padding. |
$btn-font-family |
string | null |
Base button font family. |
$btn-font-size |
string | $font-size-base |
Base button font size. |
$btn-font-weight |
string | $font-weight-normal |
Base button font weight. |
$btn-line-height |
string | 1.5 |
Base button line height. |
$btn-border-width |
string | $border-width |
Button border width. |
$btn-border-radius |
string | $border-radius |
Base button border-radius. |
$btn-box-shadow |
string | inset 0 .125em .25em rgba($white, .25), 0 .125em .125em rgba($black, .075) |
Button inner box shadow for inactive state. |
$btn-active-box-shadow |
string | inset 0 .25em .3125em rgba($black, .125) |
Button inner box shadow for active state. |
$btn-focus-box-shadow-size |
string | 0 0 0 .1875rem |
Button box shadow dimensions for focus state. |
$btn-focus-box-shadow-alpha |
string | .35 |
Button box shadow alpha, opacity, value for focus state. |
$btn-focus-box-shadow |
string | $btn-focus-box-shadow-size rgba($component-active-bg, $btn-focus-box-shadow-alpha) |
Button box shadow for focus state. |
$btn-outline-bg |
string | transparent |
Outline button background color override. |
$btn-disabled-opacity |
string | .6 |
Opacity value for button disabled state. |
$btn-sizes |
map | $component-sizes |
Button size variants. |
$btn-block-spacing-y |
string | .25rem |
Vertical spacing between consecutive sibling block variant buttons. |
$btn-icon-multiplier |
string | .5 |
Multiplier for horizontal padding of icon button variants. |
$btn-default-bg |
string | $white |
Default button background color. |
$btn-default-color |
string | color-if-contrast($uibase-500, $btn-default-bg) |
Default button text color. |
$btn-default-border-color |
string | $uibase-300 |
Default button border color. |
$btn-default-focus-box-shadow-color |
string | $component-active-bg |
Default button box shadow color for focus state. |
$btn-default-hover-bg |
string | $uibase-100 |
Default button background color for hover state. |
$btn-default-hover-color |
string | color-if-contrast($uibase-600, $btn-default-hover-bg) |
Default button text color for hover state. |
$btn-default-hover-border-color |
string | $uibase-400 |
Default button border color for hover state. |
$btn-default-active-bg |
string | $uibase-200 |
Default button background color for active state. |
$btn-default-active-color |
string | color-if-contrast($btn-default-hover-color, $btn-default-active-bg) |
Default button text color for active state. |
$btn-default-active-border-color |
string | $uibase-400 |
Default button border color for active state. |
$btn-link-color |
string | $link-color |
Text color for link buttons. |
$btn-link-hover-color |
string | $link-hover-color |
Text color for link buttons in hover/focus state. |
$btn-link-disabled-color |
string | $btn-link-color |
Text color for link buttons in disabled state. |
$btn-themes |
map | () |
Map of color schemes for buttons. |
$btn-colors |
list | $base-colors |
Colors to mix and merge into $btn-themes
|
$btn-levels |
map | $level-control |
Levels to mix button colors with. |
$btn-outline-themes |
map | () |
Map of color schemes for outline buttons. |
$btn-outline-colors |
list | $base-colors |
Colors to mix and merge into $btn-outline-themes
|
$btn-outline-levels |
map | $level-control |
Levels to mix outline button colors with. |
$btn-transition |
map | color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out |
Transition effect for buttons. |
Mixins
Here are the mixins related to buttons that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.
button-variant
Build a color variant to be applied to a button.
Argument | Type | Default | Description |
---|---|---|---|
$parent |
string | '' |
The value appended to generate the class .btn-#{$parent} .
|
$color |
string | none | Text color for the inactive button state. |
$bg |
string | none | Background color for the inactive button state. |
$border |
string | none | Border color for the inactive button state. |
$focus-shadow |
string | none | Box shadow, or focus-ring, effect the focused button state. |
$hover-color |
string | none | Text color for the hovered button state. |
$hover-bg |
string | none | Background color for the hovered button state. |
$hover-border |
string | none | Border color for the hovered button state. |
$active-color |
string | none | Text color for the active button state. |
$active-bg |
string | none | Background color for the active button state. |
$active-border |
string | none | Border color for the active button state. |
button-variant-control
Build a button color variant, using a pre-mixed color map.
Argument | Type | Default | Description |
---|---|---|---|
$parent |
string | '' |
The value appended to generate the class .btn-#{$parent} .
|
$color |
string | none | The pre-mixed color map. |
button-variant-control-outline
Build a outline button color variant, using a pre-mixed color map, with a special override for the inactive background color.
Argument | Type | Default | Description |
---|---|---|---|
$parent |
string | '' |
The value appended to generate the class .btn-#{$parent} .
|
$color |
string | none | The pre-mixed color map. |
$bg |
string | $btn-outline-bg |
Background color override for the inactive button state. |
button-size
Build a button size variant.
Argument | Type | Default | Description |
---|---|---|---|
$padding-y |
string | none | Vertical padding. |
$padding-x |
string | none | Horizontal padding. |
$font-size |
string | none | Font size. |
$line-height |
string | none | Line height. |
$border-radius |
string | none | Border radius. |