Dialog - Skeleton

Skeleton
  1. components
  2. ›
  3. dialog
  4. ›
  5. svelte

Dialog

A modal dialog for displaying content and actions.

CSS React Svelte Doc API

Alert Dialog

The 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.

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.

Drawer

This example repurposes the Dialog for use as a side-panel Drawer. It also introduces basic transition animations.

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.

Direction

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.

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

RootProvider

Property Default Type
value - 
() => DialogApi<PropTypes>
children - 
Snippet<[]> | undefined
The default slot content to be rendered within the component.

Root

Property Default Type
dir "ltr" 
"ltr" | "rtl" | undefined
The document's text/writing direction.
role "dialog" 
"dialog" | "alertdialog" | undefined
The dialog's role
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 true 
boolean | undefined
Whether to trap focus inside the dialog when it's opened
preventScroll true 
boolean | undefined
Whether to prevent scrolling behind the dialog when it's opened
modal true 
boolean | undefined
Whether to prevent pointer interaction outside the element and hide all content below it
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 true 
boolean | undefined
Whether to close the dialog when the outside is clicked
closeOnEscape true 
boolean | undefined
Whether to close the dialog when the escape key is pressed
open - 
boolean | undefined
The controlled open state of the dialog
defaultOpen false 
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.
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.

RootContext

Property Default Type
children - 
Snippet<[() => DialogApi<PropTypes>]>

Trigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself

Backdrop

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

Positioner

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

Content

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

Title

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

Description

Property Default Type
element - 
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

CloseTrigger

Property Default Type
element - 
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself