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>

Scrollable Modal

If a modal grows larger than the screen, it will be scrollable. The inner content will be aligned to the top of the modal.

Confirm

Confirm modals are used frequently in web applications to confirm an action. You can use the confirm function to display a confirm modal.

import { confirm } from '@hyvor/design/components';

async function handleDelete() {
    const confirmed = await confirm({
        title: 'Confirm to delete',
        content: 'Please confirm that you want to delete this item. This action cannot be undone.',
        danger: true
    });

    if (confirmed) {
        // Delete the item
    }
}

The confirm function accepts an object with the following properties:

interface ConfirmOptions {
    // title of the modal
    title: string,

    // content of the modal. Can be a string or a Svelte component
    content: string | SvelteComponent,

    // props to pass to the content component
    contentProps?: Record<string, any>,
    
    // text of the confirm button (default: "Confirm")
    confirmText?: string,
    
    // text of the cancel button (default: "Cancel")
    cancelText?: string,
    
    // whether the modal is a danger modal (button color will be red)
    danger?: boolean
}