> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Alert) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/messaging-alert--overview)
```tsx
import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
export const AllColors = () => (
Primary AlertThis is a neutral alert for general information.Destructive AlertThis alert indicates an error or dangerous action.Info AlertThis alert provides informational content to the user.Warning AlertThis alert warns the user about potential issues.Success AlertThis alert confirms a successful action or operation.
);
```
## Usage
```tsx
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.
```tsx
import { Alert, AlertContent, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
export const TitleOnly = () => {
return (
Alert with title onlyInformation message without description
);
};
```
### 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.
```tsx
import { useState } from 'react';
import { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
export const WithCloseButton = () => {
const [showInfo, setShowInfo] = useState(true);
const [showWarning, setShowWarning] = useState(true);
return (
{showInfo && (
Dismissable AlertThis alert can be closed by clicking the X button. setShowInfo(false)} />
)}
{showWarning && (
Warning with close setShowWarning(false)} />
)}
);
};
```
### 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.
```tsx
import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
import { Button } from '@wallarm-org/design-system/Button';
export const WithControls = () => {
return (
Alert with Two Action Buttons
This alert has two action buttons on the right side without a close button.
Alert with Actions and CloseThis alert has action buttons and a close button.Critical ErrorAn error occurred that requires your attention.
);
};
```
### 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.
```tsx
import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
import { Button } from '@wallarm-org/design-system/Button';
export const WithBottomActions = () => {
return (
Alert with Bottom Actions
This alert has action buttons at the bottom of the content area.
Destructive Alert with Actions
This error requires immediate action. Please review and take necessary steps.
);
};
```
### 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.
```tsx
import { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
export const MinMaxWidth = () => {
const edge = 'border border-dashed border-border-primary';
return (
Short
This is a very long alert title that demonstrates the maximum width behavior of the
component
This is an extended description that shows how the alert handles longer content, and
wraps within whatever width the container gives it.
Past 980px the alert stops widening and leaves the rest of the container empty
A line of text long enough to reach the ceiling, so the gap on the right is the
ceiling rather than the content running out.
This is a very long alert title that demonstrates the custom maximum width behavior
This alert has a custom maxWidth of 500px set via prop.
);
};
```
### 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.
```tsx
import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
export const MaxLines = () => {
const longTitle =
'This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed.';
const longDescription =
'This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible.';
return (
{longTitle}{longDescription}
{longTitle}{longDescription}
{longTitle}{longDescription}
);
};
```
### 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.
```tsx
import { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
import { Code } from '@wallarm-org/design-system/Code';
export const WithCode = () => (
Message goes hereDescription goes here
Optional code output
Syntax Error in ConfigurationAn error occurred while parsing the configuration file.