Components
Banner
A full-width banner component for alerts and announcements with multiple variants, statuses, and polymorphic icon support.
Installation
bunx @happlyui/cli@latest add banner
Dependencies
npm packages
@radix-ui/react-slot
Registry dependencies
These are automatically installed when you add this component.
tvpolymorphicrecursive-clone-children
Usage
import * as Banner from "@/components/ui/banner"
<Banner.Root variant="filled" status="error">
<Banner.Content>
<Banner.Icon as={RiErrorWarningFill} />
<span>Alert title</span>
</Banner.Content>
<Banner.CloseButton>
<RiCloseLine className="w-5 h-5" />
</Banner.CloseButton>
</Banner.Root>
Examples
Error
Error status across all four variants: filled, light, lighter, and stroke.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="error">
<Banner.Content>
<Banner.Icon as={RiErrorWarningFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
<Banner.CloseButton>
<RiCloseLine className="w-5 h-5" />
</Banner.CloseButton>
</Banner.Root>
Warning
Warning status across all four variants.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="warning">
<Banner.Content>
<Banner.Icon as={RiAlertFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
</Banner.Root>
Success
Success status across all four variants.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="success">
<Banner.Content>
<Banner.Icon as={RiCheckboxCircleFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
</Banner.Root>
Information
Information status across all four variants.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="information">
<Banner.Content>
<Banner.Icon as={RiInformationFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
</Banner.Root>
Feature
Feature status across all four variants.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="feature">
<Banner.Content>
<Banner.Icon as={RiMagicFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
</Banner.Root>
Primary
Primary status across all four variants using the brand color.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
Insert your alert title here!⋅Insert your description here.
<Banner.Root variant="filled" status="primary">
<Banner.Content>
<Banner.Icon as={RiSparklingFill} />
<span className="text-label-sm">Alert title</span>
</Banner.Content>
</Banner.Root>
API Reference
Banner.Root
The main banner container.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'filled' | 'light' | 'lighter' | 'stroke' | 'filled' | The visual style |
status | 'error' | 'warning' | 'success' | 'information' | 'feature' | 'primary' | 'feature' | The status color scheme |
Banner.Content
Centered content area for icon, text, and links.
| Prop | Type | Default | Description |
|---|
Banner.Icon
Polymorphic icon container that receives variant and status from Banner.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
as | React.ElementType | 'div' | The element or component to render as |
Banner.CloseButton
Close button positioned at the end of the banner.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Renders as child element using Radix Slot |