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.

Title Slot

You can use the title slot to customize the title of the modal.

<Modal bind:show={show} size="large">

    <TabNav active="paste" slot="title">
        <TabNavItem name="paste">
            <IconLink45deg slot="start" />
            Paste Link
        </TabNavItem>
        <TabNavItem name="posts">
            <IconSearch slot="start" />
            Search Posts
        </TabNavItem>
    </TabNav>

    This is a modal with a tab navigation in the title.

    <div slot="footer">
        <Button variant="invisible" on:click={() => show5 = false}>Close</Button>
    </div>

</Modal>