Button

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

<Button variant="primary">Click me</Button>

Prop	Type	Default
`variant?`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "destructive" \| "active" \| "inactive"`	`"primary"`
`size?`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`rounded?`	`"size" \| "sm" \| "lg" \| "xl" \| "full" \| "none"`	`"size"`
`state?`	`"default" \| "active" \| "inactive"`	`"default"`
`isIcon?`	`boolean`	`false`
`isLoading?`	`boolean`	`false`
`loader?`	`"icon" \| "stripes"`	`"icon"`
`isFullWidth?`	`boolean`	`false`
`uppercase?`	`boolean`	`false`
`noContainerQueries?`	`boolean`	`false`
`asChild?`	`boolean`	`false`
`disabled?`	`boolean`	`false`
`className?`	`string`	`undefined`

Usage

Variants

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="link">Link</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="active">Active</Button>
    <Button variant="inactive">Inactive</Button>
</div>

Sizes

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button size="sm">SM</Button>
    <Button size="md">MD</Button>
    <Button size="lg">LG</Button>
    <Button size="xl">XL</Button>
</div>

With Icons

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

<div className="flex flex-col gap-2 w-full">
    <div className="flex flex-row gap-2 w-full justify-center">
        <Button size="sm">
            <TerminalIcon />
            SM With Icon
        </Button>
        <Button size="md">
            <TerminalIcon />
            MD With Icon
        </Button>
        <Button size="lg">
            <TerminalIcon />
            LG With Icon
        </Button>
        <Button size="xl">
            <TerminalIcon />
            XL With Icon
        </Button>
    </div>
    <div className="flex flex-row gap-2 w-full justify-center">
        <Button size="sm" isIcon>
            <TerminalIcon />
        </Button>
        <Button size="md" isIcon>
            <TerminalIcon />
        </Button>
        <Button size="lg" isIcon>
            <TerminalIcon />
        </Button>
        <Button size="xl" isIcon>
            <TerminalIcon />
        </Button>
    </div>
</div>

Rounded

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button rounded="size">Size (matches size prop)</Button>
    <Button rounded="sm">SM</Button>
    <Button rounded="lg">LG</Button>
    <Button rounded="xl">XL</Button>
    <Button rounded="full">Full</Button>
    <Button rounded="none">None</Button>
</div>

Loading States

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button size="sm" loader="icon" isLoading>
        Icon
    </Button>
    <Button size="sm" loader="stripes" isLoading>
        Stripes
    </Button>
    <Button size="sm" loader="stripes" isLoading variant="secondary">
        Stripes
    </Button>
    <Button size="sm" loader="stripes" isLoading variant="outline">
        Stripes
    </Button>
    <Button size="sm" loader="stripes" isLoading variant="destructive">
        Stripes
    </Button>
    <Button size="sm" loader="stripes" isLoading variant="active">
        Stripes
    </Button>
    <Button size="sm" loader="stripes" isLoading variant="inactive">
        Stripes
    </Button>
</div>

Buttons can accept a state prop that overrides the variant colors. This is useful when working with devices and mute states, where you want to keep a particular variant but change the color to match the state.

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

<div className="flex flex-col gap-2 w-full">
    <div className="flex flex-row gap-2 w-full justify-center">
        <Button variant="primary" state="default">Primary / Default</Button>
        <Button variant="primary" state="inactive">Primary / Inactive</Button>
        <Button variant="primary" state="active">Primary / Active</Button>
    </div>
    <div className="flex flex-row gap-2 w-full justify-center">
        <Button variant="outline" state="active">Outline / Active</Button>
        <Button variant="outline" state="inactive">Outline / Inactive</Button>
    </div>
</div>

Full Width

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

<div className="flex flex-col gap-2 w-full">
    <Button isFullWidth variant="primary">Full Width Button</Button>
    <Button isFullWidth variant="outline">Full Width Outline</Button>
</div>

Uppercase

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button uppercase>Normal Text</Button>
    <Button uppercase variant="secondary">Secondary Text</Button>
    <Button uppercase variant="outline">Outline Text</Button>
</div>

Disabled

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

<div className="flex flex-row gap-2 w-full justify-center">
    <Button disabled variant="primary">Disabled Primary</Button>
    <Button disabled variant="secondary">Disabled Secondary</Button>
    <Button disabled variant="outline">Disabled Outline</Button>
</div>

On this page