Info with Title Alert for React

When the title is the whole message. This demo is variant="info" with a single AlertTitle and nothing else. Add AlertDescription when the reader still needs what the notice means.

Info is for something worth knowing that carries no risk: a new feature, a beta label, a scheduled change. Warning is for something that may cause a problem if ignored, such as an expiring plan. If nothing bad happens when the reader skips it, it's info.

From variant="info": it gives the alert a faint tint of the theme's --info color, a stronger border in the same color, and colors any icon. The title keeps the regular text color, so it stays easy to read in light and dark mode.

Often, yes: information the reader has seen can go. The Alert has no built-in close button, so keep whether it's shown in your own state and put a Dismiss button in AlertAction.

className="max-w-lg" caps the width. The title text is Info, in an AlertTitle, which is font-medium. There is no icon, so the alert does not add an icon column.

Alert renders with role="alert", which interrupts the reader to announce it. That's too urgent for most information: pass role="status" for a polite announcement, or remove the role when the alert is on the page from the start.