Banner

A full-width notification bar for announcements, alerts, and system-level messages.

Import

import { Banner } from "@/components/ui"

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "error"	"info"	Color scheme and default icon.
title	string	—	Primary message text.
description	string	—	Secondary detail text.
action	ReactNode	—	Action button or link.
onDismiss	() => void	—	Shows dismiss button when provided.
icon	ReactNode	—	Custom icon (overrides default).

Information

Success

Warning

Error

New feature available

We just launched a new AI model. Check it out in your dashboard settings.

Upload complete

All 12 images have been processed and are ready for use.

Storage almost full

You have used 90% of your storage quota.

Payment failed

Your last payment could not be processed. Please update your billing info.