Alert

A message that stays on the page: a status, a warning, a banner across the top of a view. The kit adds a neutral type and a three-level emphasis.

Types

Set type to success, info, warning or error for a status color, or to default for a neutral alert with no status.

Variant

Set variant to filled to drop the border, or leave it at outlined (the default) to keep it, and the tinted background stays the same.

Emphasis

Set emphasis to subtle for a neutral fill with no border, or to strong to fill the alert with its status color.

Neutral type

Set type="default" for an alert with no status color at any emphasis, where strong inverts with the light or dark theme.

Custom colors

Pass background and border classes in className to color an alert yourself, with emphasis left at default so its own fill does not win.

Description

Add a description under the title for the details, like what changed in a new version.

Action

Pass a button in action to place it at the end of the alert, like an Undo after archiving a message.

Action on a strong alert

Buttons in action keep their own colors on an emphasis="strong" fill, so give each one a color that reads on it.

Show icon

Set showIcon to add the status icon in front of the title, which is off by default outside a banner.

Custom icon

Pass icon with showIcon to replace the status icon, like a spinner while files sync or an upload glyph for a failed upload.

Custom close icon

Pass closable={{ closeIcon }} to replace the close button's icon, like a trash icon on a failed upload, and give the button an aria-label that says what it does.

Wrapping title alignment

Pass classNames to line up the icon, action and close button with the first line of a title that wraps, instead of centering them.

Closable

Set closable to add a close button, and the alert animates out and hides itself when the reader closes it.

Collapsible notice

Put a toggle button in action and truncate the title with classNames, so a long notice shows one line until the reader opens it.
Set banner for a full-width strip with no border and a warning icon, for a notice across the top of a page.

classNames as a function

Pass classNames a function of the alert's props to style parts by type, like a bold title on success alerts only.

ErrorBoundary

Wrap part of a page in Alert.ErrorBoundary to show an error alert in its place when it fails to render, instead of a blank screen.

Update available

Put an update button in action so the reader can install a new version straight from the notice.

Major outage

An emphasis="strong" error for an incident, where a link in the description takes the alert's text color and an underline.

Payment retry

Put a danger-colored Retry button in action for a failed payment, since a button keeps its own colors inside the alert.

Promo banner

Combine type="default", emphasis="strong" and banner for an announcement bar that inverts with the theme instead of using a status color.

In context

The component inside real screens, with the components it usually sits beside.

Billing warning

A billing settings notice about an expiring card, with two actions and a close button, above the page's own fine print.

API Reference

Alert
Alert's props. Rows marked antuikit in the Version column are added by the kit.
Alert.ErrorBoundary
Alert.ErrorBoundary's props.