Alert

Inline banner for contextual status within a page. Supports sentiment variants, icons, optional action and dismiss.

Open in FigmaView in Storybook

Preview

Code

Inspect

Appearance

hasIcon

Content

children

iconName

Layout & behavior

fullWidth

hasAction

isDismissible

Props — Alert

Prop	Type	Description
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Control height and padding.
`sentiment`	`"brand" \| "pink" \| "success" \| "error" \| "warning" \| "info" \| "neutral"`	Semantic color theme and default icon.
`children`	`ReactNode`	Inline message body.
`iconName`	`FaIconName \| false`	Leading icon. Omit for sentiment default; false hides the icon; string overrides.
`hasAction`	`boolean`	Show outlined secondary action button.
`actionLabel`	`ReactNode`	Action button label.
`actionStartIconName`	`FaIconName`	Leading icon on the action button.
`actionEndIconName`	`FaIconName`	Trailing icon on the action button.
`onAction`	`() => void`	Action button click handler.
`isDismissible`	`boolean`	Show dismiss control.
`onClose`	`() => void`	Dismiss handler.
`fullWidth`	`boolean`	Stretch to container width.