The <Modal>
component is used to display an interactive modal dialog.
show
false
title
size
medium
small
medium
large
closeOnOutsideClick
true
closeOnEscape
true
default
title
footer
<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>
Set the size
attribute to small
, medium
or large
to change the size of the modal.
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>
If a modal grows larger than the screen, it will be scrollable. The inner content will be aligned to the top of the modal.
You can use the loading
property to display a loading spinner in the modal. It accepts a string or a boolean. If a string is passed, it will be displayed as the loading text. This is the recommended way to display a loading state in a modal, due to the following issues with other methods:
loading
propertySetting the loading
property will disable the close button, escape key, and the outside click to close the modal. Therefore, you should handle both success and error cases manually.
Instead of manually setting the footer slot, you can set the footer
property of the modal to display a common footer with a cancel and a confirm button.
<Modal
...
footer={{
cancel: {
text: 'Cancel',
},
confirm: {
text: 'Delete',
danger: true
}
}}
on:cancel={() => toast.success('Cancelled')}
on:confirm={() => {
show = false;
toast.success('Deleted')
}}
/>
The footer
property accepts an object with the following properties:
interface Footer {
// cancel button
// set to false to hide the button
cancel?: {
// text of the button (default: "Cancel")
text?: string,
// props to pass to the button
props?: Record<string, any>
},
// confirm button
confirm?: {
// text of the button (default: "Confirm")
text?: string,
// props to pass to the button
props?: Record<string, any>,
// whether the button is a danger button (button color will be red)
danger?: boolean
}
}
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
}