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.
This is example content for the slide out drawer panel.
This is example content for the slide out drawer panel.
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.
API Reference
Root
| Prop | Default | Type |
|---|---|---|
children | — | ReactNode |
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 |
Provider
| Prop | Default | Type |
|---|---|---|
value | — | DialogApi<PropTypes> |
children | — | ReactNode |
Context
| Prop | Default | Type |
|---|---|---|
children | — | (dialog: DialogApi<PropTypes>) => ReactNode |
Trigger
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"button">) => Element) | undefined Render the element yourself |
Backdrop
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Positioner
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Content
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Title
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Description
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
CloseTrigger
| Prop | Default | Type |
|---|---|---|
element | — | ((attributes: HTMLAttributes<"button">) => Element) | undefined Render the element yourself |
Root
| Prop | 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. |
Provider
| Prop | Default | Type |
|---|---|---|
value | — | () => DialogApi<PropTypes> |
children | — | Snippet<[]> | undefined The default slot content to be rendered within the component. |
Context
| Prop | Default | Type |
|---|---|---|
children | — | Snippet<[() => DialogApi<PropTypes>]> |
Trigger
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"button">]> | undefined Render the element yourself |
Backdrop
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Positioner
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Content
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Title
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Description
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
CloseTrigger
| Prop | Default | Type |
|---|---|---|
element | — | Snippet<[HTMLAttributes<"button">]> | undefined Render the element yourself |