Button-group

A component for displaying groups of buttons.

npm install @vrembem/button-group

@use "@vrembem/button-group";

button-group

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>

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">
  <button class="button">...</button>
  ...
</div>
<div class="button-group button-group_full_xl">
  <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_lg">
  <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`	`2em`	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;