Standard with Everything Alert for React

CircleCheckIcon, with aria-hidden="true", next to a title that says Success. There is no variant, so the icon takes the alert's text color. variant="success" is what tints the border and paints the icon with --success.

Neutral fits the default variant: the icon takes the alert's text color, so nothing suggests an error or a success. If the icon needs a color, switch to the variant that matches it instead of coloring the icon alone.

Put it first, before AlertTitle: the alert places a direct svg child in its own column, spanning the title and description, aligns it with the title's first line, and sizes it unless you pass a size class.

Both are size="xs" inside one AlertAction with className="flex gap-2". View Details is the default button. Dismiss is variant="outline". Neither has a click handler.

Use a semantic variant (success, info, warning, destructive) when the reader should know the kind of message at a glance. Use the default when it's general, or when several colored alerts would compete.

"Your changes have been saved successfully and are now live." It is an AlertDescription, in the muted color, under the title. The alert is capped with className="max-w-lg".