Button Groups

Button groups are a way to create a set of buttons and make them visually grouped together. Button groups can either be lined up horizontally, or stacked vertically. They can also either be presented inline, or block (meaning they span the full width of their container). By default, a button group will be displayed inline and with a horizontal orientation.

<div class="button-group">
  <button class="button">Button</button>
  ...
</div>

This can be changed either by setting a different default in the $button-groups map, or using the modifier classes. To display a button group vertically, you can use the .vertical class.

<div class="button-group vertical">
  <button class="button">Button</button>
  ...
</div>

Also, if you’d like your button group to span the full width of their container, you can use the .block class.

<div class="button-group block">
  <button class="button">Button</button>
  ...
</div>
<div class="button-group block vertical">
  <button class="button">Button</button>
  ...
</div>

Variable Map

Button group variables are encompassed within the $button-groups map and are used throughout all button group mixins to set default values and toggle output.

$button-groups: (
  'output' : true,
  'class' : 'button-group',

  'display' : 'inline',
  'orientation' : 'horizontal',

  'spacing' : 0.25em,
  'border-radius' : map-get($buttons, 'border-radius'),
  'inner-border-radius' : 0,

) !default;

make-button-group

Creates the base styles for button groups and sets the default display and orientation based on what’s passed in the $button-groups map.

@include make-button-group( $defaults: true, $options: () );
Variable Type Default
$defaults Boolean true
$options Map $button-groups

add-button-group-display

Adds display styles for button groups. This can either be inline so it behaves like an inline element or block so that it spans the full width of it’s container.

@include add-button-group-display( $display: null, $options: () );
Variable Type Options Default
$display String 'inline', 'block' null
$options Map $button-groups

add-button-group-orientation

Set the orientation styles for button groups. This can either be horizontal or vertical (hori or vert shorthand respectively).

@include add-button-group-orientation( $orientation: null, $options: () );
Variable Type Options Default
$orientation String 'horizontal', 'vertical', 'hori', 'vert' null
$options Map $button-groups