Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Information with Icon Alert Dialog for React

An informational dialog with an info icon beside New Features Available and a single button labeled Got it.

An info icon sits beside New Features Available, and it is hidden from assistive tech. The text mentions new collaboration features. Got it is the only button. It does not open another page.

Use one button when the reader only needs to acknowledge the note. A note that should stay visible is an Alert. In React, Base UI does not track who dismissed it.

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

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Show Info
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div className="flex items-center gap-2">
        <InfoIcon aria-hidden="true" className="size-5 text-info" />
        <AlertDialogTitle>New Features Available</AlertDialogTitle>
      </div>
      <AlertDialogDescription>
        We&apos;ve added new collaboration features to help your team work
        more efficiently. Check out the what&apos;s new page to learn more.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogAction>Got it</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

What color should an info icon be?

text-info, the theme's blue for neutral information. Keep destructive, success and warning colors for messages with that weight.

Beside the title or above it?

Beside it, in a flex items-center gap-2 row, for routine information. Center it above the title for messages that need more attention.

What size?

size-5 matches the title text.

Can different messages use different icons?

Yes, consistently: info for general notes, a lightbulb for tips, a bell for notifications. People learn the system.

Does the icon need a label?

No. It's decorative and aria-hidden, because the title says New Features Available. Label an icon only when it carries meaning the text doesn't.

Does Got it close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples