Button-group

A component for displaying groups of buttons.

Documentation

Installation

npm install @vrembem/button-group

Styles

@use "@vrembem/button-group";

Markup

The most basic implementation of the button-group component consists of the button-group container wrapping a group of buttons.

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

Button-groups that are siblings to one another will inherit the gap provided by the adjacent sibling.

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

Modifiers

button-group_full_[key]

A modifier to allow a button-group to span the full width of it's container. Values and class keys are generated using the $breakpoints map. Omitting the key value from the modifier (e.g. button-group_full) will stack items under all conditions.

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

Available Variations

• button-group_full
• button-group_full_xs
• button-group_full_sm
• button-group_full_md
• button-group_full_lg
• button-group_full_xl

button-group_gap_[key]

Adjusts the gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

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

Available Variations

• button-group_gap_none
• button-group_gap_xs
• button-group_gap_sm
• button-group_gap_md
• button-group_gap_lg
• button-group_gap_xl

button-group_join

A modifier to join buttons without a button-group component. This removes all gap spacing and adjusts the border-radius to allow buttons to be visually be joined as a single unit.

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

button-group_stack_[key]

Adds a breakpoint for when button-group elements should be stacked vertically. Values and class keys are generated using the $breakpoints map. Omitting the key value from the modifier (e.g. button-group_stack) will stack items under all conditions.

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

Available Variations

• button-group_stack
• button-group_stack_xs
• button-group_stack_sm
• button-group_stack_md
• button-group_stack_lg
• button-group_stack_xl

Customization

Sass Variables

Variable	Default	Description
$prefix-block	null	String to prefix blocks with.
$prefix-element	"__"	String to prefix elements with.
$prefix-modifier	"_"	String to prefix modifiers with.
$prefix-modifier-value	"_"	String to prefix modifier values with.
$breakpoints	core.$breakpoints Ref ↓	The breakpoints map the button-group_full_[key] and button-group_stack_[key] modifiers use to build their styles.
$border-radius	core.$border-radius	Sets the border-radius styles of buttons when button-group adjusts them.
$gap	0.5em	The default gap spacing for the button-group component.
$gap-join	-1px	The gap spacing used for the button-group_join modifier.
$gap-map	Sass Map Ref ↓	Used to output gap modifiers.

$breakpoints

The breakpoints map the button-group_full_[key] and button-group_stack_[key] modifiers use to build their styles.

// Inherited from: core.$breakpoints
$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;

$gap-map

Used to output gap modifiers.

$gap-map: (
  "none": 0,
  "xs": 1px,
  "sm": 0.25em,
  "md": 0.5em,
  "lg": 1em,
  "xl": 1.5em,
) !default;