Skip to content
No background activity
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Stacked dialogs
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Stacked dialogs
Components

Stacked dialogs

What happens when a dialog opens over another: a prompt over a Modal, a Modal from a drawer, an editor inside a section dialog.

The contract

  • One Escape closes only the top dialog.
  • Tab and Shift+Tab stay in the top dialog.
  • When a dialog closes, focus returns to where it was opened from.
  • Nothing is left that the keyboard cannot close.
  • A menu, a select list, a popover or a tooltip open inside a dialog closes first, alone.

The Modal, the confirm prompt, the drawer and every dialog built on useDialogFocus follow it without any wiring. A dialog rendered inside another is above it even when the two open in one handler. Two unrelated dialogs opened in one handler keep the order their effects ran in: render the one meant to be on top inside the other.

Try it

Open a dialog, open another from inside it, then press Escape and Tab.

Two dialogs opened by one press (the second is rendered inside the first):