Notification Banner

Loading demo: notification-banner-real-world

Installation

npx sdaia-ui@latest add notification-banner

import { NotificationBanner } from "@/components/ui/notification-banner"

<NotificationBanner layout="stacked" type="leading-icon" />

Notification banner with a stacked vertical layout.

Loading demo: notification-banner-stacked

Banner with an image displayed alongside the notification content.

Loading demo: notification-banner-image

Banner with a user avatar for person-specific notifications.

Loading demo: notification-banner-avatar

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