Button Group
A container that groups related buttons together with consistent styling.
A container that groups related buttons together with consistent styling.
import {
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
} from "@/components/ui/button-group";<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>Set the orientation prop to change the button group layout.
Control the size of buttons using the size prop on individual buttons.
Nest <ButtonGroup> components to create button groups with spacing.
The <ButtonGroupSeparator> component visually divides buttons within a group.
Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.
Create a split button group by adding two buttons separated by a ButtonGroupSeparator.
Wrap an Input component with buttons.
Wrap an InputGroup component to create complex input layouts.
Create a split button group with a Menu component.
Pair with a Select component.
Use with a Popover component.