Error with Title, Description and Action Alert for React

When the reader needs an explanation and can recover from the alert itself, such as a request that failed but can be retried. For a failure with nothing to click, drop the buttons; for one that needs no explanation, drop the description.

Alert is a grid: AlertTitle and AlertDescription stack in it with a small gap, and AlertAction is positioned at the end of the first row while the alert pads its end side to leave room. You don't need wrapper elements or flex classes; the parts do the layout.

AlertAction is the alert's single action slot, so both buttons go inside it, with flex gap-2 to space them. Two separate AlertAction parts would sit on top of each other.

Wrap. A truncated error message can hide the one part the reader needs. AlertDescription wraps onto as many lines as it needs; keep it to a sentence or two so the alert stays short.

It needs no breakpoints: the buttons stay at the end of the title row and the description wraps under them. Keep the title short so it fits beside the two buttons on a narrow screen.

You can stack them with a gap, but several at once is hard to act on. Prefer one alert that summarizes the failures, and mark individual form fields with their own error messages, as in Field.