#Alert

An inline message bound to one part of the screen, which stays until the state changes or the reader dismisses it — reach for Banner when the message would still matter on another page, Toast for a transient confirmation, and the field’s own error for a single invalid input. color carries the meaning and AlertIcon takes its icon from it, so the pair is not yours to mix; primary is the neutral default for a notice with no status to encode.

Source · Storybook

#Usage

import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';

#Examples

#Title only

A title on its own is a complete alert. Add a description only when it says something the title does not.

#With close button

AlertClose gives the reader a way out — add it where dismissing is reasonable, and leave it off while the condition still holds.

#With controls

AlertControls as a direct child of Alert puts the actions top-right, which is what a wide alert wants. The buttons are always secondary and small, neutral or destructive to match the alert, never a solid primary.

#With bottom actions

The same controls nested inside AlertContent drop below the text instead, which is what a narrow alert wants. Placement follows the width rather than a rule.

#Min max width

Each row puts the alert in a container that crosses one of its bounds, since neither is visible in a container that sits between them. The alert has no width of its own: it takes the container's, clamped between 256 and 980px.

#Max lines

lineClamp is opt-in: without it long text wraps freely, and with it the text truncates and the full string moves into a tooltip. Four lines is the usual cap.

#With code

An inline Code line inside the content, for the error code or the command that failed — the one piece of rich content an alert is built to carry.

#Props

#AlertClose

#AlertContent

#AlertControls

#AlertDescription

#AlertIcon

#AlertTitle

#Explorer