--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-dialog --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-dialog.md mode: provenance representation: markdown origin_response_id: b6b5dcb3e4f0830fc46d23e758209ca6 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.628Z version_nonce: 634977ecf9727bc2e27ac387caadcaa3 generated_at_utc: 2026-11-08T23:36:17.906Z response_nonce: e78334c869f88bf0534f43bab65948df ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-dialog--docs) The `` tag is a web component that controls the styling and display for dialog modals. ![Image of the DOM relationship for the zg-dialog web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-dialog-web-component-dom.png "zg-dialog web component DOM") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-column/) ## Usage A `` tag can be manually inserted inside the grid as slotted content. The element can inherently be styled through CSS variables or by targeting the tag directly. ```html ``` ## Attributes There are a couple attributes to hook into the `` lifecycle. These lifecycle hooks are for opening, closing, rendering and editing. **Example Usage** ```html

This is a custom dialog

 ``` ### cancel Callback method to call on custom dialog when the dialog's "cancel" button is clicked - Type: String - Accepted values: "functionName" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/XBVNL7I6) ### confirm Callback method to call on custom dialog when the dialog's "confirm" button is clicked - Type: String - Accepted values: "functionName" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/JYVD3V6H) ### label Sets the dialog's header 'label' text - Type: String - Default: `""` - Accepted values: "Are you sure you want to continue?" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/NMCHC24M) ### open The presence of the specification-standard `open` attribute designates whether the dialog is shown or hidden - Type: String - Default: `""` - Accepted values: N/A - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/0L3OPPLM) ## CSS Variables `` can be styled by CSS variables, like so: ```css :root { --zg-dialog-background: red; } ``` Below is a list of all the associated `--zg-dialog` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-dialog-background` | #fff | Styles the background of dialog header | [Example code](https://app.zingsoft.com/demos/embed/7PR4SRRW) | | `--zg-dialog-body-background` | var(--zg-dialog-background) | Styles the background of dialog body | [Example code](https://app.zingsoft.com/demos/embed/179BYIFU) | | `--zg-dialog-body-border` | 0 | Styles the border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/QBM0OIM8) | | `--zg-dialog-body-border-bottom` | var(--zg-dialog-body-border, 0) | Styles the bottom border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/V7GPBX6Y) | | `--zg-dialog-body-border-left` | var(--zg-dialog-body-border, 0) | Styles the left border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/UT7PLIJD) | | `--zg-dialog-body-border-right` | var(--zg-dialog-body-border, 0) | Styles the right border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/3N8I2IAV) | | `--zg-dialog-body-border-top` | var(--zg-dialog-body-border, 0) | Styles the top border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/P5NH1SU5) | | `--zg-dialog-body-margin` | 10px 0 | Sets the margin of dialog body | [Example code](https://app.zingsoft.com/demos/embed/JWPAD3TC) | | `--zg-dialog-body-padding` | 0 | Sets the padding of dialog body | [Example code](https://app.zingsoft.com/demos/embed/Z8DLXRVR) | | `--zg-dialog-footer-background` | var(--zg-dialog-background) | Styles the background of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/H27KMSA5) | | `--zg-dialog-footer-border` | 0 | Styles the border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/IW16P1T1) | | `--zg-dialog-footer-border-bottom` | var(--zg-dialog-footer-border, 0) | Styles the bottom border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/Q7VVGHZT) | | `--zg-dialog-footer-border-left` | var(--zg-dialog-footer-border, 0) | Styles the left border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/XWEQTFFE) | | `--zg-dialog-footer-border-right` | var(--zg-dialog-footer-border, 0) | Styles the right border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/ZSDQ13MP) | | `--zg-dialog-footer-border-top` | var(--zg-dialog-footer-border, 1px solid var(--theme-border-color)) | Styles the top border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/PJRFHAGU) | | `--zg-dialog-footer-justify-content` | flex-end | Sets the horizontal alignment of contents in dialog footer | [Example code](https://app.zingsoft.com/demos/embed/CNK0M0O8) | | `--zg-dialog-footer-margin` | 1.25rem 0 0 | Sets the margin of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/EJ1GWKJR) | | `--zg-dialog-footer-padding` | .875rem 0 0 | Sets the padding of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/QHF0OT6N) | | `--zg-dialog-header-background` | var(--zg-dialog-background) | Styles the background of dialog header | [Example code](https://app.zingsoft.com/demos/embed/G03K1B6P) | | `--zg-dialog-header-border` | 0 | Styles the border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/FTZ4O6XG) | | `--zg-dialog-header-border-bottom` | var(--zg-dialog-header-border, 0) | Styles the bottom border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/MGVKXZG2) | | `--zg-dialog-header-border-left` | var(--zg-dialog-header-border, 0) | Styles the left border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/RW53U4MG) | | `--zg-dialog-header-border-right` | var(--zg-dialog-header-border, 0) | Styles the right border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/J0L1R6CU) | | `--zg-dialog-header-border-top` | var(--zg-dialog-header-border, 0) | Styles the top border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/PJO7AU08) | | `--zg-dialog-header-color` | Browser's default value | Sets the font folor of dialog header | [Example code](https://app.zingsoft.com/demos/embed/9HFIZO8V) | | `--zg-dialog-header-margin` | 0 | Sets the margin of dialog header | [Example code](https://app.zingsoft.com/demos/embed/VBZX6FJF) | | `--zg-dialog-header-padding` | 0 | Sets the padding of dialog header | [Example code](https://app.zingsoft.com/demos/embed/W0RHP8WF) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-dialog { padding: 2rem; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-dialog::part(body) { background-color: red; } ``` Below is a list of all the associated ZGDialog shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `body` | Dialog body. | | `body-content-wrapper` | Dialog content wrapper that wraps around editor labels and inputs. | | `body-error` | Dialog error message that appears top of dialog body. | | `dialog` | Dialog mask or overlay. | | `footer` | Dialog footer consisting of footer buttons (cancel and confirm). | | `footer-cancel` | Dialog footer cancel button. | | `footer-confirm` | Dialog footer confirm button. | | `form` | Dialog form consisting of header, body, and footer. | | `header` | Dialog header consisting of header label and close button. | | `header-close` | Dialog header close button. | | `header-label` | Dialog header label. | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content ``` Below is a list of all the associated ZGDialog slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Dialog body content. |