Button Group

A group of connected buttons.

How to

Button groups are lists of buttons packed into a single component because the action they trigger is somehow related.

This component has different variations, each one with different functionality. Specifically, the "default" version is just a list of (standard) button elements; in the --checkbox variation, each button acts as a checkbox button; in the --radio variation, only one button at a time can be selected.

To set a gap among the buttons, add the inline-flex, flex-wrap and gap-{size} utility classes:

<div class="btns inline-flex flex-wrap gap-xs">
  <!-- ... -->
</div>

Customize the component using CSS custom properties:

:root {
  --btns-button-radius: 0.25em;
  --btns-button-padding-x: var(--space-sm);
  --btns-button-padding-y: var(--space-sm);
}

Categories

• Controls

Bug report & feedback

Component Github page ↗