Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Blocks
  2. Takeover Dialog
  3. Usage

Takeover dialog

Usage

Overview

TakeoverDialog from @prepared911/ui/blocks/takeover-dialog covers the viewport for one task. It is a modal dialog: a title, a close control, an optional description, a scrolling body, and an optional footer. Escape and the close control dismiss it and return focus to the trigger.

Use it where a screen used TakeoverPage from @prepared911/ui-takeover-page to hold one workflow until the person finishes or dismisses it.

When to use

  • One task that needs the whole viewport. Review, intake, or a multi-section workflow that should hide the page behind it.
  • A close control the person can always reach. The header close and Escape both dismiss the dialog.
  • Actions that belong with the task. Pass footer with one primary action last.

When not to use

  • A short prompt or a small form. Use Dialog or FormDialog.
  • A side panel. Use Drawer, DetailDrawer, or FormLayoutDrawer.
  • A list of records. Use CrudPage.

Open state

Pass open and onOpenChange, or pass trigger and let the dialog manage itself. defaultOpen opens it on mount.

Footer

Order footer actions tertiary, Cancel, then one primary. Omit footer when the header close control is enough.

Focus

Escape closes the dialog and focus returns to trigger. Open it from a row and omit trigger: focus returns to the element that was focused before the dialog opened.

Previous

Takeover Page / Accessibility

Next

Takeover dialog / API and Development

On this page

Overview
When to use
When not to use
Open state
Footer
Focus