Modal

The <Modal> component is used to display an interactive modal dialog.

Properties

Slots

Examples

Basic Modal

<script>
    import { Modal, Button } from '@hyvor/design/components';
    let show = false;
</script>

<Button on:click={() => show = true}>Show modal</Button>

<Modal title="Confirm to delete" bind:show={show}>

    Please confirm that you want to delete this item. This action cannot be undone.

    <div slot="footer">
        <Button variant="invisible" on:click={() => show = false}>Cancel</Button>
        <Button color="red">Delete</Button>
    </div>

</Modal>

Sizes

Set the size attribute to small, medium or large to change the size of the modal.