Standard with Title Alert for React

Use the default when the message is neither good nor bad news, or when the page already has colored alerts and this one shouldn't compete. Reach for destructive, warning, success or info when the category matters to the reader.

Only the look: variant="info" adds a blue tint, a blue border and a blue icon, which marks the message as information. The default variant has the card's background and the regular border, so it reads as part of the page.

Yes: pass classes on Alert, such as a background and a border color, as the Alert page's Colors demo does. Use the theme's tokens rather than raw palette colors so the alert follows light and dark mode, and prefer a built-in variant when one fits.

An Alert with no variant and className="max-w-lg", holding one AlertTitle whose text is Success. There is no icon, description, or AlertAction.

Yes: the meaning is in the text, not the color, and the default variant keeps the theme's foreground on the card background. Alert also renders with role="alert"; for a message that isn't urgent, pass role="status" for a polite announcement.

If the reader has nothing left to do with the message, yes. The Alert has no built-in close button: keep its visibility in your own state and put a Dismiss button in AlertAction.