Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  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
Confirm Dialog / Accessibility
Next
Takeover dialog / API and Development
On this page
Overview
When to use
When not to use
Open state
Footer
Focus