The Dialog component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.



Below is a collection of simple to complex examples.


This is a simple dialog with just basic logic.

Using the persistent prop will not close the dialog the overlay is clicked.


Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.


Dialogs can be nested: you can open one dialog from another.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Edit This Page on GitHub Last Updated: 2021-02-15