Notification Banner

Persistent page-level banner with title, description, icon, and optional actions. Expanded cousin of Alert.

Preview

Code

Inspect

This is a title

This is additional descriptive text.

title *

description *

iconName

primaryActionLabel

secondaryActionLabel

fullWidth

hasPrimaryAction

hasSecondaryAction

isDismissible

Prop	Type	Description
`sentiment`	`"brand" \| "pink" \| "success" \| "error" \| "warning" \| "info" \| "neutral"`	Semantic color theme and default icon.
`fillStyle`	`"none" \| "color"`	none = white surface; color = tinted fill.
`title`	`ReactNode`	Banner headline.
`description`	`ReactNode`	Supporting detail text.
`iconName`	`FaIconName`	Override default sentiment icon.
`hasPrimaryAction`	`boolean`	Show primary action button.
`hasSecondaryAction`	`boolean`	Show secondary action button.
`primaryActionLabel`	`ReactNode`	Primary action button label.
`secondaryActionLabel`	`ReactNode`	Secondary action button label.
`onPrimaryAction`	`() => void`	Primary action click handler.
`onSecondaryAction`	`() => void`	Secondary action click handler.
`isDismissible`	`boolean`	Show dismiss control.
`onClose`	`() => void`	Dismiss handler.
`fullWidth`	`boolean`	Stretch to container width.