ODialog

ODialog is a modal dialog that participates in the application poppable stack.

Usage

Step by step

1. Import ODialog from ooko-ui/dialog and OPoppableFooter from ooko-ui/poppable.
2. Bind v-model:open and give the dialog a title or an aria-label.
3. Put actions in a nested component and render OPoppableFooter there. It teleports those actions to the sticky dialog footer while preserving the nested component's logic. The footer is the only place for actions: it is translucent and blurred, so scrolled content shows faintly behind it.

Example

The rendered example and its source come from the same Vue single-file component.

Interactive playground

Toggle the default overlay and dismissal controls.

Overlay Glass Close on overlay click Show close button

Props

Prop	Type	Default	Description
open	boolean	false	Controls whether the dialog is in the poppable stack.
title	string	undefined	Title rendered in the dialog header.
ariaLabel	string	"Dialog"	Accessible name used when no title is supplied.
overlay	boolean	true	Displays the page overlay. Defaults to true.
closeOnOverlayClick	boolean	true	Closes when the overlay is clicked. Defaults to true.
closeOnEscape	boolean	true	Closes when Escape is pressed. Defaults to true.
showClose	boolean	true	Displays the header close button. Defaults to true.
closeLabel	string	"Close dialog"	Accessible label of the header close button.
glass	boolean	false	Uses a translucent, blurred panel with a thin border, a softer overlay, and a footer without its band. Defaults to the app's glass option.

Events

Event	Payload	Description
update:open	boolean	Requests a change to the open state.
close	OokoPoppableCloseOptions	Emitted after the dialog requests to close.

Slots

Slot	Props	Description
header	none	Replaces the header title. Supply aria-label when it does not provide an accessible name.
default	none	Provides the dialog content.

CSS custom properties

Custom property	Default	Description
--o-dialog-max-width	36rem	Sets the maximum inline size of dialogs.
--o-dialog-title-font-family	var(--o-font-family-display)	Sets the font family of the dialog title.
--o-dialog-glass-background	var(--o-background-glass)	Sets the translucent panel background of a glass dialog.
--o-dialog-glass-border	1px solid var(--o-border-glass)	Sets the panel border shorthand of a glass dialog.
--o-dialog-glass-backdrop-filter	var(--o-backdrop-filter-glass)	Sets the filter applied to the content behind a glass dialog panel.
--o-dialog-glass-overlay-background	color-mix(in srgb, var(--o-background-overlay) 40%, transparent)	Sets the softer overlay background behind a glass dialog.
--o-dialog-glass-overlay-backdrop-filter	none	Sets the filter applied to the page behind the overlay of a glass dialog, such as blur(0.375rem).

Override example

:root {
  --o-dialog-max-width: 42rem;
  --o-dialog-glass-overlay-background: color-mix(in srgb, var(--o-background-overlay) 25%, transparent);
  --o-dialog-glass-overlay-backdrop-filter: blur(0.375rem);
}

Accessibility

The active dialog has role="dialog" and aria-modal="true", receives initial focus, traps Tab navigation, and returns focus to its opener when it closes. Escape and the named native close button request closure. A title labels the dialog; provide aria-label when no title is present.

Behavior and edge cases

Dialogs show a dark transparent overlay in both themes, close on overlay click, close on Escape, and show a close button by default. Opening a dialog or drawer suspends the active blocking poppable: it stays visible under the new overlay but becomes inert, and only the top poppable takes input and traps focus. Closing the active one restores the preceding item unless its queue is flushed. The dialog fades and scales into view; reduced-motion users receive no transition.

glass draws a translucent, blurred panel with a thin border over a softer overlay that leaves the page sharp unless --o-dialog-glass-overlay-backdrop-filter blurs it, and the footer keeps only its light tint over the translucent panel. Outside glass, the footer is set apart from the body by --o-dialog-footer-background, a light tint over the panel surface, rather than by a rule. The --o-dialog-glass-* properties tune it; browsers without backdrop-filter show the translucent panel without blur. --o-dialog-title-font-family changes the title font of every dialog.