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.

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.

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

<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

Buttons

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

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

To cover cases where you have to keep the href attribute on a disabled link.

<a href="#" role="button" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Primary anchor button</a>
<a href="#" role="button" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Secondary anchor button</a>

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.

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" 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="check1-0" type="checkbox" class="btn-check-input" checked>
<label for="check1-0" class="btn btn-outline-info">Checkbox 1</label>
</div>
<div class="btn-check">
<input id="check1-1" type="checkbox" class="btn-check-input">
<label for="check1-1" class="btn btn-outline-info">Checkbox 2</label>
</div>
<div class="btn-check">
<input id="check1-2" type="checkbox" class="btn-check-input" disabled>
<label for="check1-2" class="btn btn-outline-info">Checkbox 3</label>
</div>
</div>
<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-50 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-default-disabled-bg string $btn-default-bg Default button background color for disabled state.
$btn-default-disabled-color string $btn-default-color Default button text color for disabled state.
$btn-default-disabled-border-color string $btn-default-border-color Default button border color for disabled 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, $disabled-color, $disabled-bg, $disabled-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.
$disabled-color string none Text color for the disabled button state.
$disabled-bg string none Background color for the disabled button state.
$disabled-border string none Border color for the disabled 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.