A component for displaying groups of buttons.
npm install @vrembem/button-group
@use "@vrembem/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>
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>
button-group_full
button-group_full_xs
button-group_full_sm
button-group_full_md
button-group_full_lg
button-group_full_xl
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>
button-group_gap_none
button-group_gap_xs
button-group_gap_sm
button-group_gap_md
button-group_gap_lg
button-group_gap_xl
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>
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>
button-group_stack
button-group_stack_xs
button-group_stack_sm
button-group_stack_md
button-group_stack_lg
button-group_stack_xl
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. |
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;
Used to output gap modifiers.
$gap-map: (
"none": 0,
"xs": 1px,
"sm": 0.25em,
"md": 0.5em,
"lg": 1em,
"xl": 1.5em,
) !default;