--- meta: title: Button Group description: Button groups are used to organize related buttons into a cohesive unit, with options for layout, spacing, and alignment. layout: component --- ```html:preview First Inner 1 Inner 2 Last ``` ## Examples ### Basic Usage By default, button groups display buttons horizontally with no gaps, creating a seamless connected appearance. ```html:preview Left Center Right ``` ### Direction Use the `direction` attribute to control the orientation of the button group. The default is `horizontal`, but you can set it to `vertical` for a stacked layout. ```html:preview Horizontal 1 Horizontal 2 Horizontal 3

Vertical 1 Vertical 2 Vertical 3 ``` ### Grow Use the `grow` attribute to make buttons expand equally to fill the full width of their container. This is useful for creating full-width button groups. ```html:preview First Second Third Fourth ``` ### Alignment By default, button groups are right-aligned (flex-end). Use the `start` attribute to align buttons to the left (flex-start). ```html:preview Right Aligned 1 Right Aligned 2 Right Aligned 3

Left Aligned 1 Left Aligned 2 Left Aligned 3 ``` ### Spacing Use the `gap` attribute to add spacing between buttons. This creates visual separation while maintaining the logical grouping. ```html:preview First Second Third Fourth ``` ### Gap with Grow Combine `gap` and `grow` attributes to create evenly-spaced, full-width button groups. ```html:preview First Second Third Fourth ``` ### Button Variants Button groups work with all button variants including colors, sizes, and styles. ```html:preview Default Secondary Success

Error Warning Info

Outline 1 Outline 2 Outline 3 ``` ### Button Sizes Button groups respect the size of their contained buttons. ```html:preview Small 1 Small 2 Small 3

Medium 1 Medium 2 Medium 3

Large 1 Large 2 Large 3 ``` ### With Icons Button groups work seamlessly with icon buttons. ```html:preview

Add Edit Delete ``` ### Vertical with Gap Combine vertical direction with gap for a spaced vertical layout. ```html:preview Option 1 Option 2 Option 3 Option 4 ``` ### Action Button Groups A common pattern is to use button groups for action buttons like save/cancel or submit/reset combinations. ```html:preview Cancel Save Changes

Reset Submit ``` ### Segmented Controls Button groups can be used to create segmented control-like interfaces for toggling between views or options. ```html:preview Day Week Month Year

List Grid Board ``` ### Toolbar Pattern Button groups are ideal for creating toolbars with related actions. ```html:preview ``` ### Responsive Wrapping Button groups support wrapping by default, allowing buttons to flow to multiple lines on smaller screens. ```html:preview
Button 1 Button 2 Button 3 Button 4 Button 5 Button 6
```