Dialog

<Button on:click={() => (open = true)}>Open Dialog</Button>

<Dialog bind:open>
    <DialogHeader>Dialog Title</DialogHeader>
    <DialogContent>
        A very simple dialog with a title, content and buttons.
    </DialogContent>
    <DialogActions>
        <Button variant="outline" color="gray" on:click={() => (open = false)}>
            Cancel
        </Button>
        <Button autoFocus on:click={() => (open = false)}>Okay</Button>
    </DialogActions>
</Dialog>

<Button on:click={() => (open = true)}>Open Dialog</Button>

<Dialog 
    bind:open
    disableCloseOnEscape
    disableCloseOnOutsideClick
>
    <DialogHeader>Close With Button Only</DialogHeader>
    <DialogContent>
        A dialog that can only be closed with the button but not by clicking outside
        or by pressing the Esc key.
    </DialogContent>
    <DialogActions>
        <Button autoFocus on:click={() => (open = false)}>Okay</Button>
    </DialogActions>
</Dialog>

<Button on:click={() => (open = true)}>Open Fullscreen Dialog</Button>

<Dialog fullscreen bind:open>
    <DialogHeader>Fullscreen Dialog</DialogHeader>
    <DialogContent>
        This dialog fills the whole screen.
    </DialogContent>
    <DialogActions>
        <Button autoFocus on:click={() => (open = false)}>Okay</Button>
    </DialogActions>
</Dialog>