Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Info

Info with Everything Alert for React

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

Framework
UI library

This is the full info alert: an InfoIcon from Lucide, a title, a description, and Learn More and Dismiss buttons in an Alert with variant="info". The icon goes first and the alert gives it its own column, colored with the info tint. Use it for prominent announcements, such as a feature launch or a beta program, where the reader should notice, understand, and possibly act.

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

What is in this info alert?

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

What color is the Info icon?

The theme's --info color, set by variant="info" on the alert. You don't add color or size classes: the alert sizes the icon and colors it for each variant, while the title and description keep the regular text colors.

Why is the icon aria-hidden?

The title already says Info, so the icon is decorative. The demo sets aria-hidden="true" on InfoIcon. The buttons still have visible labels.

How does the icon line up with the title?

Put it first, before AlertTitle: the alert places a direct svg child in its own column, spanning the title and description, and aligns it with the first line of the title.

Which button variants does the demo use?

Learn More is the default Button and Dismiss is variant="outline". Both are size="xs", in one AlertAction with className="flex gap-2". Neither has a click handler.

What does the description say?

"This feature is currently in beta and new updates are being released regularly." It sits in AlertDescription, which uses the muted text color. The info tint is on the background, the border, and the icon.

All 25 alert examples