Control Bar

The ControlBar component provides a styled container for organizing control elements like buttons, toggles, and other interactive components. It features a gradient border, shadow effects, and optional entrance animations.

import { ControlBar, ControlBarDivider, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar>
  <Button variant="primary">Control 1</Button>
  <ControlBarDivider />
  <Button variant="secondary">Control 2</Button>
  <Button variant="outline">Control 3</Button>
</ControlBar>

Component Variants

ControlBar

The main ControlBar component that wraps control elements.

import { ControlBar, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar>
  <Button variant="primary">Action</Button>
  <Button variant="secondary">Secondary</Button>
</ControlBar>

Prop	Type	Default
`children?`	`React.ReactNode`	`undefined`
`className?`	`string`	`undefined`
`noAnimateIn?`	`boolean`	`false`

ControlBarDivider

A divider component for visually separating control elements within the ControlBar.

import { ControlBar, ControlBarDivider, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar>
  <Button variant="primary">Left</Button>
  <ControlBarDivider />
  <Button variant="secondary">Right</Button>
</ControlBar>

Prop	Type	Default
`className?`	`string`	`undefined`

Usage

Basic Usage

Create a control bar with multiple control elements.

import { ControlBar, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar>
  <Button variant="primary">Connect</Button>
  <Button variant="secondary">Settings</Button>
</ControlBar>

With Dividers

Use dividers to visually separate groups of controls.

import { ControlBar, ControlBarDivider, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar>
  <Button variant="primary">Connect</Button>
  <ControlBarDivider />
  <Button variant="secondary">Audio</Button>
  <Button variant="secondary">Video</Button>
  <ControlBarDivider />
  <Button variant="outline">Settings</Button>
</ControlBar>

Without Animation

Disable the entrance animation if needed.

import { ControlBar, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar noAnimateIn={true}>
  <Button variant="primary">Static Control</Button>
</ControlBar>

Custom Styling

Apply custom classes to override default styling.

import { ControlBar, Button } from "@pipecat-ai/voice-ui-kit";

<ControlBar className="bg-primary/10 border-2">
  <Button variant="primary">Custom Styled</Button>
</ControlBar>

On this page