Warning with Title Alert for React

When the title says what to watch out for and what to do is obvious: Storage almost full, Unsaved changes. If the reader would ask what happens if they ignore it, add an AlertDescription.

A warning is about something that may go wrong; an error is about something that already did. An expiring plan or a nearly full disk is a warning; a failed payment is an error and uses variant="destructive".

From variant="warning": a faint tint of the theme's --warning color on the background, a stronger border, and the same color on any icon. The title keeps the regular text color, since amber text is hard to read on a light background.

Before the thing it warns about: above a form whose submission is risky, at the top of a usage page for a quota. A warning after the action is too late to help.

Persistent while the condition holds: a warning about a full disk should stay until there's space. The Alert never hides itself, so it stays until your code stops rendering it. Let readers dismiss only warnings they can safely ignore.

Yes: Alert renders with role="alert", so the warning is announced as soon as it appears. The title states the problem in text, so the amber color isn't the only signal.