Primitives
Button Group
Group buttons together with shared borders and rounded logic.
import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>| Prop | Type | Default |
|---|---|---|
orientation? | "horizontal" | "vertical" | "horizontal" |
className? | string | undefined |
Usage
Variants & Sizes
import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-4">
<ButtonGroup>
<Button variant="primary" size="md">Button 1</Button>
<Button variant="primary" size="md">Button 2</Button>
<Button variant="primary" size="md">Button 3</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="md">Button 1</Button>
<Button variant="outline" size="md">Button 2</Button>
<Button variant="outline" size="md">Button 3</Button>
</ButtonGroup>
</div>Orientation
import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-8">
<ButtonGroup orientation="horizontal">
<Button size="md">A</Button>
<Button size="md">B</Button>
<Button size="md">C</Button>
</ButtonGroup>
<ButtonGroup orientation="vertical">
<Button size="md">A</Button>
<Button size="md">B</Button>
<Button size="md">C</Button>
</ButtonGroup>
</div>