# Dialog A modal dialog for displaying content and actions. ```svelte Trigger Hello World This is an example of a basic dialog. Close ``` ## Alert Dialog The [alertdialog](https://w3c.github.io/aria/#alertdialog) role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound. ```svelte Trigger Alert Something important has happened! Close ``` ## Interaction If desired, you can disable click to close interactions for the backdrop. We recommend using this sparingly, as this traps the user in this experience. ```svelte Trigger Dialog Title This dialog will only close with the Close button or via programmatic controls. Close ``` ## Drawer This example repurposes the Dialog for use as a side-panel Drawer. It also introduces basic transition animations. ```svelte Trigger
Drawer Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, soluta optio assumenda nobis dignissimos minus doloremque in aliquid amet laboriosam! Soluta recusandae facilis provident ratione a! Vitae expedita rerum magni.

``` ## Z-Index By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part. ```svelte Trigger Setting Z-Index This dialog will have a z-index value of 50. Close ``` ## Direction ```svelte Trigger Hello World This is an example of a basic dialog. Close ``` ## Headless Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling. ```svelte
Hello Skeleton ×
Skeleton Gif Three spooky skeletons!
``` The benefits are as follows: - You can make the `Trigger` surround any element, including an icon, button, image, etc. - You can modify the entire structure within `Content`, including custom markup and styling. - You may place the `CloseTrigger` anywhere, and use it as an X close option. ## API Reference ### DialogRoot | Property | Type | Description | | --- | --- | --- | | `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" | | `role` | "dialog" | "alertdialog" | undefined | The dialog's role Default: "dialog" | | `aria-label` | string | undefined | Human readable label for the dialog, in event the dialog title is not rendered | | `ids` | Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }> | undefined | The ids of the elements in the dialog. Useful for composition. | | `trapFocus` | boolean | undefined | Whether to trap focus inside the dialog when it's opened Default: true | | `preventScroll` | boolean | undefined | Whether to prevent scrolling behind the dialog when it's opened Default: true | | `modal` | boolean | undefined | Whether to prevent pointer interaction outside the element and hide all content below it Default: true | | `initialFocusEl` | (() => MaybeElement) | undefined | Element to receive focus when the dialog is opened | | `finalFocusEl` | (() => MaybeElement) | undefined | Element to receive focus when the dialog is closed | | `restoreFocus` | boolean | undefined | Whether to restore focus to the element that had focus before the dialog was opened | | `closeOnInteractOutside` | boolean | undefined | Whether to close the dialog when the outside is clicked Default: true | | `closeOnEscape` | boolean | undefined | Whether to close the dialog when the escape key is pressed Default: true | | `open` | boolean | undefined | The controlled open state of the dialog | | `defaultOpen` | boolean | undefined | The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog. Default: false | | `onOpenChange` | ((details: OpenChangeDetails) => void) | undefined | Function to call when the dialog's open state changes | | `getRootNode` | (() => Node | ShadowRoot | Document) | undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | | `onEscapeKeyDown` | ((event: KeyboardEvent) => void) | undefined | Function called when the escape key is pressed | | `onRequestDismiss` | ((event: LayerDismissEvent) => void) | undefined | Function called when this layer is closed due to a parent layer being closed | | `onPointerDownOutside` | ((event: PointerDownOutsideEvent) => void) | undefined | Function called when the pointer is pressed down outside the component | | `onFocusOutside` | ((event: FocusOutsideEvent) => void) | undefined | Function called when the focus is moved outside the component | | `onInteractOutside` | ((event: InteractOutsideEvent) => void) | undefined | Function called when an interaction happens outside the component | | `persistentElements` | (() => Element | null)[] | undefined | Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event | | `children` | Snippet<[]> | undefined | The default slot content to be rendered within the component. | ### DialogRootProvider | Property | Type | Description | | --- | --- | --- | | `value`* | () => DialogApi | | | `children` | Snippet<[]> | undefined | The default slot content to be rendered within the component. | ### DialogRootContext | Property | Type | Description | | --- | --- | --- | | `children`* | Snippet<[() => DialogApi]> | | ### DialogTrigger | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"button">]> | undefined | Render the element yourself | ### DialogBackdrop | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself | ### DialogPositioner | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself | ### DialogContent | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself | ### DialogTitle | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself | ### DialogDescription | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself | ### DialogCloseTrigger | Property | Type | Description | | --- | --- | --- | | `element` | Snippet<[HTMLAttributes<"button">]> | undefined | Render the element yourself |