The <Modal>
component is used to display an interactive modal dialog.
show
false
title
size
medium
small
medium
large
closeOnOutsideClick
true
closeOnEscape
true
default
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.