Standard with Title and Description Alert for React

When the title tells the reader something happened but not what it means for them. One sentence on what changed or what to do next is usually enough; if the title already says it, leave the description out.

One or two sentences. AlertDescription wraps as needed, but a long paragraph turns a notice into an article; link to the details instead.

Info when you want the announcement to stand out with its blue tint, standard when it should sit quietly in the page. If the page already has colored alerts, the default variant keeps this one from competing.

If the information is only useful once, yes. The Alert has no built-in dismiss: keep its visibility in your own state and put a button in AlertAction that hides it.

It already is: AlertTitle uses the regular text color with more weight, and AlertDescription uses the muted color at the regular weight. Pass a className to either part to change it, with theme tokens such as text-foreground.

They need no changes: the alert takes the full width of its container and the description wraps. The demo caps the width with max-w-lg, which narrower screens simply don't reach.