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.
icon - A zeta-icon element. Size will be restricted based on dialog type.
zeta-icon
confirm - Button used in footer. Must be of type zeta-button.
cancel - Button used in footer. Must be of type zeta-button.
other - Button used in footer. Must be of type zeta-button.
body - Styles the dialog body
footer - Styles the dialog footer
header - Styles the dialog header
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-14&node-type=canvas&m=dev
https://zeta-ds.web.app/web/storybook/index.html?path=/docs/dialog--docs
Action button 2 (Cancel).
Whether header text should be centered.
Action button 1 (Confirm).
Whether the modal is initially open.
Action button 3 (Learn more/Other).
Static
Title of the dialog.
MDN Reference
Protected
Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.
ChildPart
TemplateResult
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.
Slot
Slot
icon - A
zeta-iconelement. Size will be restricted based on dialog type.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
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-14&node-type=canvas&m=dev
Storybook
https://zeta-ds.web.app/web/storybook/index.html?path=/docs/dialog--docs