Primitives
Banner
Inline notification banner with actions.
import { Banner, BannerIcon, BannerTitle, BannerClose, CircleAlertIcon } from "@pipecat-ai/voice-ui-kit";
<Banner className="animate-in fade-in duration-300" variant="destructive">
<BannerIcon icon={CircleAlertIcon} />
<BannerTitle>Unable to connect. Please check web console for errors.</BannerTitle>
<BannerClose variant="destructive" />
</Banner>| Prop | Type | Default |
|---|---|---|
variant? | "primary" | "destructive" | "primary" |
inset? | boolean | false |
visible? | boolean | undefined |
defaultVisible? | boolean | true |
onClose? | () => void | undefined |
Usage
Variants
import { Banner, BannerIcon, BannerTitle, BannerClose, CircleAlertIcon } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-3 w-full">
<Banner className="flex-1">
<BannerTitle>Primary</BannerTitle>
<BannerClose />
</Banner>
<Banner variant="destructive" className="flex-1">
<BannerIcon icon={CircleAlertIcon} />
<BannerTitle>Destructive</BannerTitle>
<BannerClose variant="destructive" />
</Banner>
</div>