Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Custom Actions

Actions with Icons Alert Dialog for React

An alert dialog whose action carries an icon after its label to show where it leads.

Framework
UI library

An icon can say where a button goes faster than its label. This React alert dialog warns before leaving for an external site and puts an external-link icon after Continue. It's shadcn.io's Alert Dialog on Base UI, with a Lucide icon inside AlertDialogAction.

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

Should icons go before or after the label?

After it for direction, like an external link or an arrow: they show where the action leads. Before it for icons that describe the action, like download or delete. Mark them with data-icon="inline-end" or data-icon="inline-start" so the button spaces them.

What size should the icon be?

Leave it to the button: it sizes icons to match its text, so there's no size-* class to add.

Should Cancel get an icon too?

Rarely. Stay Here is self-explanatory. Add icons where they add meaning, which is usually only the action.

Do screen readers announce the icon?

No. It's aria-hidden, so the button is read as Continue. Never make a dialog button icon-only; the text is what everyone relies on.

Do icons cause problems on small screens?

Only with long labels. Keep labels short when you add an icon so the button doesn't wrap; the footer stacks buttons full width on mobile.

Does Continue close the dialog?

Yes; put your navigation in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples