Open default dialog

Default dialog example

This is an example of the default dialog with no bells and whistles.

The max width of this dialog is 100%.

Content size determines the width of this default dialog, thus it does not automatically span full width.

Cancel Confirm
Open small dialog

Small dialog example

This is an example of the small dialog.

The max width of this dialog is 475px.

Cancel Confirm
Open medium dialog

Medium dialog example

This is an example of the medium dialog.

The max width of this dialog is 675px.

Cancel Confirm
Open large dialog

Large dialog example

This is an example of the large dialog.

The max width of this dialog is 875px.

Cancel Confirm
Open dialog with 3 footer actions

Dialog with 3 footer actions

When there are 3 actions in the footer, ZUI Dialog will automatically push the last 2 actions to the right. The far left action is considered the tertiary action.

Help me Cancel Confirm
Open customized dialog footer with 3 actions

Customized dialog footer with 3 actions

When there are 3 actions in the footer, ZUI Dialog will automatically push the last 2 actions to the right. The far left action is considered the tertiary action.

Sometimes you might have to wrap all footer actions in a <div>. When you do this, you will need to add custom CSS to style the actions properly in the footer slot.

Help me Cancel Confirm
Open dialog that cannot be closed when you click outside of it

Disable outside click to close dialog

This is an example of a dialog that cannot be closed when you click on the backdrop or outside of the dialog.

Disabling the closing of a dialog when you click outside of it ensures users won't lose their work and also forces them to acknowledge that they want to close the dialog.

Cancel Confirm