Info with Title and Action Alert for React

Learn More and Dismiss, in one AlertAction. The alert is variant="info" with a single AlertTitle and no description.

Button has no info variant, so Learn More uses the default variant and Dismiss uses outline: the filled button is the one to press. The alert's blue tint already marks the message as information. In the info variant, ghost buttons in AlertAction take the blue hover color if you want a lighter pair.

No. It is a Button with size="xs" and no href or click handler. Dismiss is the same size with variant="outline". Wire those yourself if the buttons should navigate or hide the alert.

AlertAction is absolutely positioned at the top right. The alert adds right padding so the title keeps its room. className="flex gap-2" puts the two xs buttons in a row.

Alert has no built-in dismiss. Keep whether it is shown in your own state and have Dismiss stop rendering it. The buttons in this file are static.

Put it in the same AlertAction. That part is one absolutely positioned slot, so a second AlertAction would stack on the first. The title is only the word Info, which leaves room for the row.