Components
Button Group
A group of buttons that can be used to group related actions.
import { ButtonGroup, ButtonGroupSeparator, Button } from "@epilot/volt-ui";
<ButtonGroup>
<Button><PlusIcon /></Button>
<ButtonGroupSeparator />
<Button>Add dashboard</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="secondary">Action</Button>
<ButtonGroupSeparator />
<Button variant="secondary"><ChevronDownIcon /></Button>
</ButtonGroup>
<ButtonGroup>
<Button destructive>Action</Button>
<ButtonGroupSeparator />
<Button destructive><EllipsisIcon /></Button>
</ButtonGroup>
<ButtonGroup orientation="vertical">
<Button><PlusIcon /></Button>
<ButtonGroupSeparator orientation="vertical" />
<Button><MinusIcon /></Button>
</ButtonGroup>API Reference
ButtonGroup
Container component for grouping buttons together. Accepts all standard div props.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the button group. When "horizontal", buttons are arranged in a row. When "vertical", buttons are arranged in a column. |
className | string | - | Additional CSS classes. |
children | React.ReactNode | - | The buttons and separators to display in the group. |
ButtonGroupSeparator
A separator component used to visually divide buttons within a ButtonGroup. Accepts all standard Separator props.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | The orientation of the separator. When used in a horizontal ButtonGroup, use "vertical". When used in a vertical ButtonGroup, use "horizontal". |
className | string | - | Additional CSS classes. |
ButtonGroupText
A text component styled to match the button group appearance. Useful for displaying non-interactive text within a button group.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, the component will render as its child element instead of a div. |
className | string | - | Additional CSS classes. |
children | React.ReactNode | - | The text content to display. |