v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

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.

Page Contents

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 type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

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.

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

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.

<button type="button" class="btn btn-outline">Default</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Disable Text Wrapping #

If you don't want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Sizes #

Available Sizes #

Fancy larger or smaller buttons? Add .btn-xsmall, .btn-small, .btn-large, or .btn-xlarge for additional sizes.

<p>
<button type="button" class="btn btn-primary btn-xlarge">Extra Large button</button>
<button type="button" class="btn btn-xlarge">Extra Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xsmall">Extra small button</button>
<button type="button" class="btn btn-xsmall">Extra small button</button>
</p>

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.

<p>
<button type="button" class="btn btn-icon btn-xlarge" aria-label="Extra large icon button"><span class="fas fa-fw fa-info-circle" aria-hidden="true"></span></button>
</p>
<p>
<button type="button" class="btn btn-icon btn-large" aria-label="Large icon button"><span class="fas fa-fw fa-info-circle" aria-hidden="true"></span></button>
</p>
<p>
<button type="button" class="btn btn-icon" aria-label="Default size icon button"><span class="fas fa-fw fa-info-circle" aria-hidden="true"></span></button>
</p>
<p>
<button type="button" class="btn btn-icon btn-small" aria-label="Small icon button"><span class="fas fa-fw fa-info-circle" aria-hidden="true"></span></button>
</p>
<p>
<button type="button" class="btn btn-icon btn-xsmall" aria-label="Extra small icon button"><span class="fas fa-fw fa-info-circle" aria-hidden="true"></span></button>
</p>

Block Buttons #

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button type="button" class="btn btn-primary btn-xlarge btn-block">Extra Large Block level button</button>
<button type="button" class="btn btn-secondary btn-large btn-block">Large Block level button</button>
<button type="button" class="btn btn-success btn-block">Default block level button</button>
<button type="button" class="btn btn-warning btn-small btn-block">Small Block level button</button>
<button type="button" class="btn btn-danger btn-xsmall btn-block">Extra Small Block level button</button>

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.

Standard Buttons:

Outline Buttons:

<strong>Standard Buttons:</strong>
<p>
<button type="button" class="btn active">Default</button>
<button type="button" class="btn btn-primary active">Primary</button>
<button type="button" class="btn btn-secondary active">Secondary</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" class="btn btn-info active">Info</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" class="btn btn-light active">Light</button>
<button type="button" class="btn btn-dark active">Dark</button>
<button type="button" class="btn btn-link active">Link</button>
</p>

<strong>Outline Buttons:</strong>
<p>
<button type="button" class="btn btn-outline active">Default</button>
<button type="button" class="btn btn-outline-primary active">Primary</button>
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
<button type="button" class="btn btn-outline-success active">Success</button>
<button type="button" class="btn btn-outline-info active">Info</button>
<button type="button" class="btn btn-outline-warning active">Warning</button>
<button type="button" class="btn btn-outline-danger active">Danger</button>
<button type="button" class="btn btn-outline-light active">Light</button>
<button type="button" class="btn btn-outline-dark active">Dark</button>
</p>

Disabled State #

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Standard Buttons:

Outline Buttons:

<strong>Standard Buttons:</strong>
<p>
<button type="button" class="btn" disabled>Default</button>
<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-light" disabled>Light</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
<button type="button" class="btn btn-link" disabled>Link</button>
</p>

<strong>Outline Buttons:</strong>
<p>
<button type="button" class="btn btn-outline" disabled>Default</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-outline-success" disabled>Success</button>
<button type="button" class="btn btn-outline-info" disabled>Info</button>
<button type="button" class="btn btn-outline-warning" disabled>Warning</button>
<button type="button" class="btn btn-outline-danger" disabled>Danger</button>
<button type="button" class="btn btn-outline-light" disabled>Light</button>
<button type="button" class="btn btn-outline-dark" disabled>Dark</button>
</p>

Disabled buttons using the <a> element behave a bit different:

Disabling Anchors

Please refer to the Accessiblity notes about disabled anchors.

<strong>Anchor Standard Buttons:</strong>
<p>
<a href="#" role="button" class="btn disabled" tabindex="-1" aria-disabled="true">Default</a>
<a href="#" role="button" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Primary</a>
<a href="#" role="button" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Secondary</a>
<a href="#" role="button" class="btn btn-success disabled" tabindex="-1" aria-disabled="true">Success</a>
<a href="#" role="button" class="btn btn-info disabled" tabindex="-1" aria-disabled="true">Info</a>
<a href="#" role="button" class="btn btn-warning disabled" tabindex="-1" aria-disabled="true">Warning</a>
<a href="#" role="button" class="btn btn-danger disabled" tabindex="-1" aria-disabled="true">Danger</a>
<a href="#" role="button" class="btn btn-light disabled" tabindex="-1" aria-disabled="true">Light</a>
<a href="#" role="button" class="btn btn-dark disabled" tabindex="-1" aria-disabled="true">Dark</a>
<a href="#" role="button" class="btn btn-link disabled" tabindex="-1" aria-disabled="true">Link</a>
</p>

<strong>Anchor Outline Buttons:</strong>
<p>
<a href="#" role="button" class="btn btn-outline disabled" tabindex="-1" aria-disabled="true">Default</a>
<a href="#" role="button" class="btn btn-outline-primary disabled" tabindex="-1" aria-disabled="true">Primary</a>
<a href="#" role="button" class="btn btn-outline-secondary disabled" tabindex="-1" aria-disabled="true">Secondary</a>
<a href="#" role="button" class="btn btn-outline-success disabled" tabindex="-1" aria-disabled="true">Success</a>
<a href="#" role="button" class="btn btn-outline-info disabled" tabindex="-1" aria-disabled="true">Info</a>
<a href="#" role="button" class="btn btn-outline-warning disabled" tabindex="-1" aria-disabled="true">Warning</a>
<a href="#" role="button" class="btn btn-outline-danger disabled" tabindex="-1" aria-disabled="true">Danger</a>
<a href="#" role="button" class="btn btn-outline-light disabled" tabindex="-1" aria-disabled="true">Light</a>
<a href="#" role="button" class="btn btn-outline-dark disabled" tabindex="-1" aria-disabled="true">Dark</a>
</p>

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 #

<div class="btn-check">
<input id="checkbox0" type="checkbox" class="btn-check-input">
<label for="checkbox0" class="btn">Checkbox Button</label>
</div>

Radio Input Buttons #

<div class="btn-check">
<input id="radio0-0" type="radio" name="radio0" class="btn-check-input" checked>
<label for="radio0-0" class="btn">Radio 1</label>
</div>
<div class="btn-check">
<input id="radio0-1" type="radio" name="radio0" class="btn-check-input">
<label for="radio0-1" class="btn">Radio 2</label>
</div>
<div class="btn-check">
<input id="radio0-2" type="radio" name="radio0" class="btn-check-input">
<label for="radio0-2" class="btn">Radio 3</label>
</div>

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.

<div class="btn-check">
<input id="checkbox1" type="checkbox" class="btn-check-input" disabled>
<label for="checkbox1" class="btn">Disabled Checkbox</label>
</div>
<div class="btn-check">
<input id="radio1-0" type="radio" name="radio1" class="btn-check-input" disabled>
<label for="radio1-0" class="btn">Disabled Radio</label>
</div>

Disabled sytling will also be applied if the input buttons are contained within a disabled <fieldset>.

Disabled fieldset
<fieldset disabled>
<legend class="form-label">Disabled fieldset</legend>
<div class="btn-check">
<input id="fieldset0" type="checkbox" class="btn-check-input">
<label for="fieldset0" class="btn">Disabled Checkbox</label>
</div>
<div class="btn-check">
<input id="fieldset1" type="radio" name="fieldset1" class="btn-check-input">
<label for="fieldset1-0" class="btn">Disabled Radio</label>
</div>
</fieldset>

Grouped Input Buttons #

You can also use .btn-checks inside a .btn-group for grouping controls together.

<div class="btn-group">
<div class="btn-check">
<input id="radio2-0" type="radio" name="radio2" class="btn-check-input" checked>
<label for="radio2-0" class="btn btn-outline-info">Radio 1</label>
</div>
<div class="btn-check">
<input id="radio2-1" type="radio" name="radio2" class="btn-check-input">
<label for="radio2-1" class="btn btn-outline-info">Radio 2</label>
</div>
<div class="btn-check">
<input id="radio2-2" type="radio" name="radio2" class="btn-check-input">
<label for="radio2-2" class="btn btn-outline-info">Radio 3</label>
</div>
</div>

Or group the buttons vertically with .btn-group-vertical.

<div class="btn-group-vertical">
<div class="btn-check">
<input id="radio3-0" type="radio" name="radio3" class="btn-check-input" checked>
<label for="radio3-0" class="btn btn-outline-info">Radio 1</label>
</div>
<div class="btn-check">
<input id="radio3-1" type="radio" name="radio3" class="btn-check-input">
<label for="radio3-1" class="btn btn-outline-info">Radio 2</label>
</div>
<div class="btn-check">
<input id="radio3-2" type="radio" name="radio3" class="btn-check-input">
<label for="radio3-2" class="btn btn-outline-info">Radio 3</label>
</div>
</div>

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-white-space string null Button white space.
$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 string 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.

@include button-variant($parent, $color, $bg, $border, $focus-shadow, $hover-color, $hover-bg, $hover-border, $active-color, $active-bg, $active-border);
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.

@include button-variant-control($parent, $colors);
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.

@include button-variant-control-outline($parent, $colors, $bg);
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.

@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
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.