Warning with Title and Action Alert for React

Proceed and Cancel, in one AlertAction. The alert is variant="warning" with a single AlertTitle and no description.

Button has no warning variant, so Proceed uses the default variant and Cancel uses outline, both size="xs". The alert's amber tint carries the caution. In the warning variant, ghost buttons inside AlertAction take an amber hover color.

AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. className="flex gap-2" puts Proceed first and Cancel after it.

No. Neither button has a click handler. Stopping or continuing is something you add. Alert itself does not close.

That part is a single absolutely positioned slot. A second AlertAction would sit on top of the first. The title is one word, which leaves room for the two xs buttons.

Alert defaults to role="alert", so the title is announced when the alert appears. The amber border is not the only signal, because the title says Warning.