Skip to content

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

Free

Information with Long Content Alert Dialog for React

A privacy-policy dialog whose five changes scroll inside the dialog, with a single I Understand button.

The title is Privacy Policy Update. Five changes sit in a scrolling region with a max height, so I Understand stays in view. That button does not record consent.

Scroll inside the dialog when the choice must stay on screen. A full policy is better linked from a Dialog. In React, Base UI does not store an acceptance.

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>
      <AlertDialogTitle>Privacy Policy Update</AlertDialogTitle>
      <AlertDialogDescription>
        We have updated our privacy policy to provide you with greater
        transparency about how we collect, use, and protect your data.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <div className="flex max-h-60 flex-col gap-4 overflow-y-auto text-muted-foreground text-sm">
      <div className="flex flex-col gap-2">
        <p>Key changes include:</p>
        <ul className="ms-4 flex list-disc flex-col gap-1">
          {changes.map((change) => (
            <li key={change}>{change}</li>
          ))}
        </ul>
      </div>
      <p>
        Please review the full policy in your account settings. By continuing
        to use our service, you agree to these updated terms.
      </p>
    </div>
    <AlertDialogFooter>
      <AlertDialogAction>I Understand</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

How tall should the scrolling area be?

max-h-60 shows several lines before scrolling while leaving room for the title and button on small screens.

How is the scrolling built?

The content sits in a div with max-h-60 overflow-y-auto, between the header and the footer, so only it scrolls.

List or paragraphs?

Both: a short lead-in, a list for the key points, a closing paragraph. Use real ul and li elements.

Should the button wait until people scroll to the end?

Rarely; for information, no. For terms people must accept, see the Terms and Conditions dialog example.

How much content is too much?

If it takes more than half a minute to read, link to a page and keep the dialog to a summary.

Does I Understand 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