Alert

The Alert component is used to display important messages to the user with support for different variants and actions.

Usage & Examples

Default

Notification saved

This alert can be dismissed.

default.tsx

<Alert title="Notification saved" state="info" dismissLabel="Close notification" icon={<FaInfoCircle />} dismissible>
  This alert can be dismissed.
</Alert>

Props API

Alert props API
				Default	Description
`actions`	`ReactNode`	No	props	`—`	Action content rendered by the component.
`actionsClassName`	`string`	No	props	`—`	Additional CSS class names for the actions section.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`contentClassName`	`string`	No	props	`—`	Additional CSS class names for the content section.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`dismissButtonClassName`	`string`	No	props	`—`	Additional CSS class names for the dismiss button section.
`dismissible`	`boolean`	No	props	`false`	Dismissible.
`dismissLabel`	`string`	No	props	`"Dismiss alert"`	Dismiss Label.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Glass.
`icon`	`ReactNode`	No	props	`—`	Icon rendered by the component.
`iconClassName`	`string`	No	props	`—`	Additional CSS class names for the icon section.