Success with Title Alert for React

When the title is the whole story and the reader has nothing else to do: Changes saved, Invitation sent. If they might want to know what happens next, add an AlertDescription.

From variant="success": a faint tint of the theme's --success color on the background, a stronger border, and the same color on any icon. The title keeps the regular text color, so it stays readable in light and dark mode.

Where the reader's attention already is: above the form they just saved, or at the top of the section that changed. A success message far from the action is easy to miss.

An Alert stays until your code removes it, which suits a confirmation the reader may come back to. For one that should disappear on its own, use a toast such as Sonner. To let the reader close the alert, add a Dismiss button in AlertAction and hide it from your own state.

What succeeded, specifically: Profile updated, Payment received. The demo's Success is a placeholder; a specific title confirms the right thing happened.

Alert renders with role="alert", so the title is announced as soon as it appears. For a confirmation, a polite announcement is usually better: pass role="status" so it waits for the reader to finish what they're doing.