# Button group
Group your buttons into a horizontal or vertical stack
Buttons that are part of the same group can be grouped with <bdn-button-group> component.
Simply wrap your buttons in this component, and it will take care of their position and border radius. You can add different variants, but try to keep it down to one, or the same filled and outline variants.
WARNING
Do not use pill modifier on buttons when grouping them.
# Horizontal group
# Button group use case
# Vertical group
To create vertically stacked buttons, simply add prop vertical to <bdn-button-group> component.
# Slots reference
| Slot | Description |
|---|---|
| default | The default slot should contain only the bdn-button components. |
# Props reference
| Prop | Type | Default | Accepts | Description |
|---|---|---|---|---|
| vertical | Boolean | false | true or false | Determines if the button group is vertically stacked. If false, buttons will be joined horizontally. |