A container that groups multiple buttons together with consistent spacing and alignment. Button group enforces uniform...

A container that groups multiple buttons together with consistent spacing and alignment. Button group enforces uniform spacing between buttons and provides responsive layout options. Use button group to organize related actions (like primary and secondary buttons, or form controls) into a cohesive visual unit. Use button group when: - Pairing primary and secondary actions (e.g., Save and Cancel) - Grouping multiple related buttons for form submissions or workflows - Creating responsive button layouts that stack on mobile - Maintaining consistent spacing between button controls Composition: - Place `<ed-button>` elements inside the group - Default layout is horizontal side-by-side - Use `behavior="stacked"` to always display vertically - Use `behavior="responsive"` to stack on small screens and spread on large screens

<ed-button-group></ed-button-group>

Properties

Name Type Default Description
behavior String 'stacked' | 'responsive' = undefined A container that groups multiple buttons together with consistent spacing and alignment. Button group enforces uniform spacing between buttons and provides responsive layout options. Use button group to organize related actions (like primary and secondary buttons, or form controls) into a cohesive visual unit. Use button group when: - Pairing primary and secondary actions (e.g., Save and Cancel) - Grouping multiple related buttons for form submissions or workflows - Creating responsive button layouts that stack on mobile - Maintaining consistent spacing between button controls Composition: - Place `<ed-button>` elements inside the group - Default layout is horizontal side-by-side - Use `behavior="stacked"` to always display vertically - Use `behavior="responsive"` to stack on small screens and spread on large screens / export class EdButtonGroup extends EdElement { static get styles() { return unsafeCSS(styles); } /** Behavior variant <ed-text-passage size="sm"> <ul> <li>**stacked** Always displays buttons vertically for consistent mobile-first layouts or in narrow containers</li> <li>**responsive** Stacks buttons vertically on small screens and displays horizontally on larger screens</li> </ul> </ed-text-passage>

Slots

Name Description
- Button elements to group together

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/button-group/button-group.ts