Primitives
Banner
Inline notification banner with actions.
<Banner className="animate-in fade-in duration-300" variant="destructive">
<BannerIcon icon={CircleAlertIcon} />
<BannerTitle>Important: This is a destructive banner example.</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
<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>