Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Info

Info with Title, Description and Action Alert for React

An info alert with a title, a description, and Learn More and Dismiss buttons.

Framework
UI library

When information needs both context and a next step, combine them. This React alert stacks an AlertTitle and an AlertDescription in an Alert with variant="info" and adds Learn More and Dismiss in AlertAction. Use it for beta announcements or rollouts where the reader needs what changed, what it means, and where to read more.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which parts does this info alert include?

AlertTitle, AlertDescription, and Learn More plus Dismiss in AlertAction. The root is variant="info" with className="max-w-lg". There is no icon.

Why is Learn More filled while Dismiss is outlined?

The filled default button is the action the alert is inviting; the outline button is the quiet way out. Two filled buttons would compete, and the reader would have to stop and decide which one matters.

What does the description say?

"This feature is currently in beta. Some functionality may be limited." It is the text of AlertDescription, in the muted color. The info tint is on the background and the border.

How are the buttons placed next to a wrapping description?

AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. The description wraps in the grid under the title. Both buttons are size="xs" in one slot with className="flex gap-2".

Does this alert interrupt a screen reader?

Yes. Alert defaults to role="alert", so it is announced as soon as it appears. Pass role="status" for a polite announcement, or remove the role when the notice is on the page from the start.

Should fully-featured info alerts be dismissible?

Yes: Dismiss is there so the reader can clear a notice they've read. Wire it to your own state, since the Alert has no built-in dismiss; the demo's buttons are static.

All 25 alert examples