Dialog
<zn-dialog> | ZnDialog
Short summary of the component’s intended use.
Examples
Basic Dialog
This is a basic dialog. It has a trigger button that opens the dialog. The dialog has a close button and two buttons in the footer.
<zn-button id="dialog-trigger">Open Basic dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog"> This is the dialog’s body. <zn-button color="default" slot="footer">Do Something</zn-button> <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> </zn-dialog>
Dialog Variants
Use the header-icon slot to display an sl-icon to the left of the dialog header (label).
Use this pattern for confirmation dialogs, when asking people to confirm that they want to take an action, and for informational dialogs.
Set the dialog variant (default or warning) to apply the right color theme to the icon: default for confirmation of neutral actions (like submitting a form), and warning for confirmation of destructive actions (like canceling or deleting something).
Welcome!
<zn-button id="dialog-trigger">Open Default Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog"> <zn-icon src="info" slot="header-icon"></zn-icon> If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now? <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer" type="submit">Do Something</zn-button> </zn-dialog> <zn-button id="dialog-trigger-2">Open Warning Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger-2" label="Dialog" variant="warning"> <zn-icon src="info" slot="header-icon"></zn-icon> If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now? <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="warning" slot="footer">Do Something</zn-button> </zn-dialog> <zn-button id="dialog-trigger-3" color="warning">Open Announcement Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger-3" label="Meet your new Monthly Numbers dashboard" variant="announcement"> <div slot="announcement-intro">Welcome!</div> <zn-icon src="info" slot="header-icon"></zn-icon> If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now? <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer">Do Something</zn-button> <div slot="footer-text"><a href="#">Learn more about Monthly Numbers</a></div> </zn-dialog>
Dialogs as Forms
Use dialogs as forms when you need to collect information from users. This example shows a dialog with a form inside it.
<form method="post" action="#" style="display: inline-block"> <zn-button id="dialog-trigger">Open Form Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog" size="large"> <zn-icon src="info" slot="header-icon"></zn-icon> <zn-form-group label="Profile" label-tooltip="huh" help-text="This information will be displayed publicly so be careful what you share"> <div class="form-spacing"> <zn-input type="text" name="name" label="Name" required></zn-input> <zn-select label="Favorite Animal" clearable required> <zn-option value="birds">Birds</zn-option> <zn-option value="cats">Cats</zn-option> <zn-option value="dogs">Dogs</zn-option> <zn-option value="other">Other</zn-option> </zn-select> <zn-textarea name="comment" label="Comment" required></zn-textarea> <zn-checkbox required>Check me before submitting</zn-checkbox> <br> <zn-checkbox-group label="Checkbox group" help-text="Select at least one" label-tooltip="Do you need help?" required> <zn-checkbox value="I'm option 1">Option 1</zn-checkbox> <zn-checkbox value="I'm option 2">Option 2</zn-checkbox> <zn-checkbox value="I'm option 3">Option 3</zn-checkbox> </zn-checkbox-group> </div> </zn-form-group> <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer" type="submit">Submit</zn-button> </zn-dialog>
Dialog Sizes
Dialogs come in three different sizes: small, medium, and large. The
default size is medium.
<zn-button id="dialog-trigger">Open Small Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog" size="small"> <zn-icon src="info" slot="header-icon"></zn-icon> This is a small dialog. <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer">Do Something</zn-button> </zn-dialog> <zn-button id="dialog-trigger-2">Open Medium Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger-2" label="Dialog"> <zn-icon src="info" slot="header-icon"></zn-icon> This is a medium dialog. <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer">Do Something</zn-button> </zn-dialog> <zn-button id="dialog-trigger-3">Open Large Dialog</zn-button> <zn-dialog class="dialog-basic" trigger="dialog-trigger-3" label="Dialog" size="large"> <zn-icon src="info" slot="header-icon"></zn-icon> This is a large dialog. <zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button> <zn-button color="default" slot="footer">Do Something</zn-button> </zn-dialog>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/dialog/dialog.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/dialog/dialog.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/dialog/dialog.js';
Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
label
|
The dialog’s label. Alternatively you can use the label attribute. |
header-icon
|
Optional icon to add to the left of the dialog’s label (title). A color will be applied to the icon depending on the dialog variant. |
announcement-intro
|
Optional Intro text to display below the icon, when using the variant announcement.
|
header-actions
|
Optional actions to add to the header. Works best with <zn-button> elements.
|
footer
|
The dialog’s footer. This is typically used for buttons representing various options. |
footer-text
|
Optional text to include below the footer buttons, when using the variant announcement.
|
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
The dialog’s theme variant. |
|
'default' | 'warning' | 'announcement'
|
'default'
|
size
|
The dialog’s size. |
|
'small' | 'medium' | 'large'
|
'medium'
|
open
|
Indicated whether of 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 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 to close the dialog. |
|
boolean
|
false
|
trigger
|
The dialog’s trigger element. This is used to open the dialog when clicked. If you do not provide a
trigger, you will need to manually open the dialog using the show() method.
|
|
string
|
- |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
zn-show |
|
Emitted when the dialog is opens. | - |
zn-close |
|
Emitted when the dialog is closed. | - |
zn-request-close |
|
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.
Methods
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the dialog. | - |
hide() |
Hides the dialog. | - |
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--width |
The preferred width of the dialog. Note 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 customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
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 <zn-button> elements.
|
title |
The dialog’s title. |
close-button |
The dialog’s close button. |
close-button__base |
The close buttons exported base part. |
body |
The dialog’s body. |
footer |
The dialog’s footer. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-button><zn-example><zn-icon><zn-tooltip>