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>

Theme Mappings

Primary theme

Use themes for brand-colored, non-semantic messages.

Secondary theme

Secondary styling can support related product messaging.

Tertiary theme

Tertiary styling provides another visual emphasis level.

Quaternary theme

Quaternary styling rounds out the configured theme palette.

theme-mappings.tsx

<Alert title="Primary theme" theme="primary">Primary message</Alert>
  <Alert title="Secondary theme" theme="secondary">Secondary message</Alert>
  <Alert title="Tertiary theme" theme="tertiary">Tertiary message</Alert>
  <Alert title="Quaternary theme" theme="quaternary">Quaternary message</Alert>

Semantic States

Changes saved

Your profile is up to date.

Review recommended

Two settings still use their default values.

Unable to save

Check the highlighted fields and try again.

Update available

A newer version is ready to install.

semantic-states.tsx

<Alert title="Changes saved" state="success" icon={<FaCheckCircle />}>
    Your profile is up to date.
  </Alert>
  <Alert title="Review recommended" state="warning" icon={<FaExclamationTriangle />}>
    Two settings still use their default values.
  </Alert>
  <Alert title="Unable to save" state="error" icon={<FaExclamation />}>
    Check the highlighted fields and try again.
  </Alert>
  <Alert title="Update available" state="info" icon={<FaInfoCircle />}>
    A newer version is ready to install.
  </Alert>

Surface Variants

Solid

Strong emphasis for important feedback.

Soft

Lower emphasis while preserving the semantic mapping.

Outline

A lightweight treatment for supporting information.

Glass

A translucent treatment for layered interfaces.

Glass outline

A transparent surface with a defined semantic border.

surface-variants.tsx

<Alert title="Solid" state="info" variant="solid">Strong emphasis</Alert>
  <Alert title="Soft" state="info" variant="soft">Lower emphasis</Alert>
  <Alert title="Outline" state="info" variant="outline">Lightweight treatment</Alert>
  <Alert title="Glass" state="info" variant="glass">Translucent treatment</Alert>
  <Alert title="Glass outline" state="info" variant="glassOutline">Transparent surface</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.
`icon`	`ReactNode`	No	props	`—`	Icon rendered by the component.
`iconClassName`	`string`	No	props	`—`	Additional CSS class names for the icon section.
`messageClassName`	`string`	No	props	`—`	Additional CSS class names for the message section.