Dialog

<gstock-dialog> | GstockDialog

API

Name	Description	Type	Default
`modal`	Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Gstock modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Gstock’s focus trapping.	`-`	`new GstockModal(this)`
`open`	Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog’s open state.	`boolean`	`false`
`label`	The dialog’s label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`noHeader` `no-header`	Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Name	React Event	Description	Event Detail
`gstock-show-event`	`onGstockShowEvent`	Emitted when the dialog opens.	-
`gstock-after-show-event`	`onGstockAfterShowEvent`	Emitted after the dialog opens and all animations are complete.	-
`gstock-hide-event`	`onGstockHideEvent`	Emitted when the dialog closes.	-
`gstock-after-hide-event`	`onGstockAfterHideEvent`	Emitted after the dialog closes and all animations are complete.	-
`gstock-initial-focus-event`	`onGstockInitialFocusEvent`	Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.	-
`gstock-request-close-event`	`onGstockRequestCloseEvent`	Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.	`{ source: 'close-button' \| 'keyboard' \| 'overlay' }`

Learn more about events .

Name	Description
`default`	The dialog’s main content.
`label`	The dialog’s label. Alternatively, you can use the `label` attribute.
`header-actions`	Optional actions to add to the header. Works best with `<gstock-icon-button>`.
`footer`	The dialog’s footer, usually one or more buttons representing various options.

Learn more about slots .

Name	Description
`show( )`	Shows the dialog.
`hide( )`	Hides the dialog

Learn more about methods .

Name	Description	Default
`--width`	The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
`--header-spacing`	The amount of padding to use for the header.
`--body-spacing`	The amount of padding to use for the body.
`--footer-spacing`	The amount of padding to use for the footer.

Learn more about custom properties .

Name	Description
`base`	The component’s base wrapper.
`overlay`	The overlay that covers the screen behind the dialog.
`panel`	The dialog’s panel (where the dialog and its content are rendered).
`header`	The dialog’s header. This element wraps the title and header actions.
`header-actions`	Optional actions to add to the header. Works best with `<gstock-icon-button>`.
`title`	The dialog’s title.
`close-button`	The close button, an `<gstock-icon-button>`.
`close-button__base`	The close button’s exported `base` part.
`body`	The dialog’s body.
`footer`	The dialog’s footer.

Learn more about CSS parts .

Name	Description
`dialog.show`	The animation to use when showing the dialog.
`dialog.hide`	The animation to use when hiding the dialog.
`dialog.denyClose`	The animation to use when a request to close the dialog is denied.
`dialog.overlay.show`	The animation to use when showing the dialog’s overlay.
`dialog.overlay.hide`	The animation to use when hiding the dialog’s overlay.

Learn more about animations .

This component automatically imports the following dependencies.