Action button 2 (Cancel).
Action button 1 (Confirm).
Colour of the confirm button.
Possible values are:
primary
: Blue background.positive
: Green background.negative
: Red background.What 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.Whether the modal is initially open.
Action button 3 (Learn more/Other).
Static
shadowStatic
stylesTitle of the dialog.
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()
orshow()
method:When shown as a modal, clicking the background barrier will close the modal by default; this can be changed with the
closeOnBarrierClicked
property.Slot
Slot
confirm - Button used in footer. Must be of type zeta-button.
Slot
cancel - Button used in footer. Must be of type zeta-button.
Slot
other - Button used in footer. Must be of type zeta-button.
Part
body - Styles the dialog body
Part
footer - Styles the dialog footer
Part
header - Styles the dialog header
Cssproperty
--dialog-width - Width of the dialog. Defaults to 480px.
Cssproperty
--dialog-max-height - Max height of the dialog. Defaults to 80vh.
Cssproperty
--dialog-title-font-size - Font size of the dialog title. Defaults to 1.25rem.
Cssproperty
--dialog-title-line-height - Line height of the dialog title. Defaults to 1.5rem.
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-14&node-type=canvas&m=dev
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs