🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Button Group

A group of connected buttons.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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, use one of the .btns--gap-{size} class modifiers.

.btns--gap-xxxxs { --btns-gap: var(--space-xxxxs); }
.btns--gap-xxxs  { --btns-gap: var(--space-xxxs); }
.btns--gap-xxs   { --btns-gap: var(--space-xxs); }
.btns--gap-xs    { --btns-gap: var(--space-xs); }
.btns--gap-sm    { --btns-gap: var(--space-sm); }
.btns--gap-md    { --btns-gap: var(--space-md); }
.btns--gap-lg    { --btns-gap: var(--space-lg); }
.btns--gap-xl    { --btns-gap: var(--space-xl); }
.btns--gap-xxl   { --btns-gap: var(--space-xxl); }
.btns--gap-xxxl  { --btns-gap: var(--space-xxxl); }
.btns--gap-xxxxl { --btns-gap: var(--space-xxxxl); }

Customize the component using CSS custom properties:

:root {
  // main options
  --btns-bg-color-active: var(--color-contrast-higher);
  --btns-text-color-active: var(--color-bg);
  // button style
  --btns-button-radius: 0.25em;
  --btns-button-padding-x: var(--space-sm);
  --btns-button-padding-y: var(--space-sm);


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us