AlertBanner

Feedback

Full-width banner for system messages with four visual variants and optional dismiss.

Install

npx bouncekit@latest add alertbanner

Import

import { AlertBanner } from "@/components/feedback/alert-banner"

A new version is available. Please update.

Your changes have been saved successfully.

Your trial expires in 3 days.

Failed to connect to the database.

API Reference

Prop	Type	Required	Description
`title`	`string`	—	Banner heading.
`message`	`string`	—	Supporting message.
`variant`	`"info" \| "success" \| "warning" \| "error"`	—	Visual variant. Default: "info".
`dismissible`	`boolean`	—	Show dismiss button.
`onDismiss`	`() => void`	—	Dismiss handler.

Source

src/components/feedback/alert-banner.tsx

Components/Feedback/AlertBanner