Banner
Communicate a status or message.
Installation
import { Banner } from "~/components/ui/Banner";Usage
Scheduled maintenance this Sunday at 2am CT.
<Banner>Scheduled maintenance this Sunday at 2am CT.</Banner>Tones
A new dashboard is available.
Backup completed successfully.
Your certificate expires in 7 days.
We detected an outage in your region.
<Banner tone="info">...</Banner>
<Banner tone="success">...</Banner>
<Banner tone="warning">...</Banner>
<Banner tone="danger">...</Banner>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "danger" | "info" | Semantic intent of the message. |
Accessibility
- Renders with role=status so assistive tech announces the message politely.
- Conveys intent with text and border, not color alone.