Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Info

Info with Title and Description Alert for React

An info alert with a title and a one-sentence description.

Framework
UI library

Information isn't always obvious from a title alone. This React alert pairs an AlertTitle with an AlertDescription in an Alert with variant="info", so the headline says what changed and the sentence under it says what that means. Use it for beta notices, release notes, or limitations the reader should know about.

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 does this info alert contain?

AlertTitle with the text Info, and AlertDescription with "This feature is currently in beta. Some functionality may be limited." The root is variant="info" and className="max-w-lg".

Is there an icon or a button?

No. The demo is only the title and the description. Put an svg first if you want the icon column, or an AlertAction if you want buttons.

Why isn't the description blue?

The info variant tints the alert's background and border and colors the icon, but leaves the text in the theme's foreground and muted colors. Blue body text would be harder to read, and the tint already marks the alert as information.

How are the two lines laid out?

Alert is a grid with a small gap. AlertTitle is font-medium, and AlertDescription follows it in the muted color. The description wraps inside max-w-lg.

Will a screen reader interrupt for this notice?

Yes, with the default role="alert". For a beta note that should wait its turn, pass role="status". Remove the role if the alert is on the page from the start.

Does this alert dismiss itself?

No. There is no close button, and Alert stays until your code stops rendering it. Put a button in AlertAction if the reader should hide it.

All 25 alert examples