Button Group

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@tulip-systems/core/components";

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroup vs ToggleGroup

• Use the ButtonGroup component when you want to group buttons that perform an action.
• Use the ToggleGroup component when you want to group buttons that toggle a state.

Examples

Orientation

Set the orientation prop to change the button group layout.

Size

Control the size of buttons using the size prop on individual buttons.

Separator

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.

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Input

Wrap an Input component with buttons.

Dropdown Menu

Create a split button group with a DropdownMenu component.