Notification Banner
Notification Banner
Loading preview…
1
<NotificationBanner2
layout="stacked"3
type="leading-icon"4
title="Your session expires in 5 minutes"5
description="Save your work now to avoid losing any unsaved changes in the admin console."Installation
npx sdaia-ui@latest add notification-banner
Usage
import { NotificationBanner } from "@/components/ui/notification-banner"<NotificationBanner layout="stacked" type="leading-icon" />Examples
Stacked
Notification banner with a stacked vertical layout.
Loading preview…
1
<NotificationBanner2
layout="stacked"3
type="leading-icon"4
title="Notification/Alert message title"5
description="When a Notification/Alert needs a further detailed explanation, it goes here."With Image
Banner with an image displayed alongside the notification content.
Loading preview…
1
<NotificationBanner2
layout="inline"3
type="image"4
imageSrc="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&h=400&fit=crop"5
imageAlt="Notification preview"With Avatar
Banner with a user avatar for person-specific notifications.
Loading preview…
1
<NotificationBanner2
layout="inline"3
type="avatar"4
avatar={{ initials: 'SA' }}5
title="Notification/Alert message title"API Reference
NotificationBannerProps
Props for the NotificationBanner component.
Prop | Type | Default | Required |
|---|---|---|---|
layout | 'inline' | 'stacked' | 'inline' | optional |
type | 'leading-icon' | 'avatar' | 'progress' | 'image' | 'leading-icon' | optional |
title | ReactNode | - | required |
description | ReactNode | - | optional |
icon | ReactNode | - | optional |
avatar | NotificationBannerAvatar | - | optional |
imageSrc | string | - | optional |
imageAlt | string | '' | optional |
progress | number | 40 | optional |
actions | ReactNode | - | optional |
onDismiss | () => void | - | optional |
hideCloseButton | boolean | false | optional |
dismissLabel | string | 'Close' | optional |
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |
