Skip to main content

Dialog

A popup dialog used to convey a message to the user.

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=23954-93036

Demo

zeta-web v0.11.0
Web Components


A reusable dialog or modal window with a customizable interface and functionality.

A dialog should popup either in response to user action or to get the users attention.

The dialog can be shown either as a modal or non-modal dialog. Modal is recommended for most uses. To show the dialog, call showModal() or show() method:

(document.querySelector("#dialog1") as ZetaDialog)?.showModal();

When shown as a modal, clicking the background barrier will close the modal by default; this can be changed with the closeOnBarrierClicked property.

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs

Slots

NameDescriptionType
defaultBody of dialog; typically text.text
confirmButton used in footer. Must be of type zeta-button.zeta-button
cancelButton used in footer. Must be of type zeta-button.zeta-button
otherButton used in footer. Must be of type zeta-button.zeta-button

Attributes

NameDescriptionTypeDefault
titleTitle of the dialog.undefinedundefined
centeredbooleanfalse
initialOpenWhether the modal is initially open.booleanfalse
flavorWhat type of dialog box to show.This will change the icon and icon colour shown in the header.Possible values are:- default: Shows black block icon.- info: Shows purple info icon.- success: Shows green verified icon.- warning: Shows yellow warning icon.- error: Shows red error icon.'error' | 'info' | 'warning' | 'default' | 'success'"default"
confirmButtonFlavorColour of the confirm button.Possible values are:- primary: Blue background.- positive: Green background.- negative: Red background."primary" | "positive" | "negative""primary"

Inherited Attributes

NameDescriptionTypeDefaultInherited From
roundedWhether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none.boolean | undefinedtrueContourable
returnValueReturn value of the dialog.string""Popup
closeOnBarrierClickedWhether the modal should close when the background barrier is clicked.This is only relevant for modal dialogs, non-modal dialogs do not control their background barrier.booleantruePopup
openWhether component is open or closed.undefinedundefinedPopup

CSS Properties

NameDescription
--dialog-widthWidth of the dialog. Defaults to 480px.
--dialog-max-heightMax height of the dialog. Defaults to 80vh.
--dialog-title-font-sizeFont size of the dialog title. Defaults to 1.25rem.
--dialog-title-line-heightLine height of the dialog title. Defaults to 1.5rem.