LibraryActive

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Field note

What it does

Radix Primitives Alert Dialog component: modal dialog with focus trap, controlled/uncontrolled state, and accessible Title/Description parts.

Capabilities

Available capabilities

Non-modal mode Modal mode Screen reader announcements Keyboard interactions Async close after form submission Controlled or uncontrolled state Screen reader announcements Esc closes the component automatically Esc key dismissal Controlled or uncontrolled Focus trapping Custom portal container Focus trapping Portal support

Accordion

Allow collapsing all items

Anatomy

Close after asynchronous form submission

Use controlled props to programmatically close the dialog after an async operation.

Cancel and Action buttons

Buttons that close the dialog, visually distinguished from each other.

Content

Custom portal container

Customise the element that your alert dialog portals into.

Description

An accessible description to be announced when the dialog is opened.

Examples

Expanded by default

Features

Header

Item

Multiple items open at the same time

Root

Title

An accessible name to be announced when the dialog is opened.