component

Modal

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles.

Source code in GitHub Modal in Storybook

Set Up #

To use the Modal component, first import it in your script tag:

Example.svelte
<script>
	import { Modal } from '@sans-ui/core';
</script>

Usage #

The visibility of the modal is controlled by the open property, which you can bind to a variable that a button (or other element) will toggle.

Example.svelte
<script lang="ts">
	import { Button, Modal } from '@sans-ui/core';

	let popupModal = false;
</script>

<Button on:click={() => (popupModal = !popupModal)}>Pop-up modal</Button>

<Modal size="md" bind:open={popupModal}>
	<ModalContent>
		<ModalHeader title="Modal Title" />
		<ModalBody>
			<!-- Here you can write your own code! -->
		</ModalBody>
	</ModalContent>
</Modal>

Size #

The size prop allows you to control the size of the modal. Available options include sm, md, lg, and full.

Example.svelte
<script lang="ts">
	import { Button, Modal } from '@sans-ui/core';

	let popupModal = false;
</script>

<Button on:click={() => (popupModal = !popupModal)}>Pop-up modal</Button>

<Modal size="full" bind:open={popupModal}>
	<ModalContent>
		<ModalHeader title="Modal Title" />
		<ModalBody>
			<!-- Here you can write your own code! -->
		</ModalBody>
	</ModalContent>
</Modal>

Dismissible #

Set the dismissible property to false to prevent the modal from closing when clicking the overlay.

Example.svelte
<script lang="ts">
	import { Button, Modal } from '@sans-ui/core';

	let popupModal = false;
</script>

<Button on:click={() => (popupModal = !popupModal)}>Pop-up modal</Button>

<Modal size="md" dismissible={false} bind:open={popupModal}>
	<ModalContent>
		<ModalHeader title="Modal Title" />
		<ModalBody>
			<!-- Here you can write your own code! -->
		</ModalBody>
	</ModalContent>
</Modal>

Animation #

Control the modal’s animation by setting the animation property to false to disable it.

Example.svelte
<script lang="ts">
	import { Button, Modal } from '@sans-ui/core';

	let popupModal = false;
</script>

<Button on:click={() => (popupModal = !popupModal)}>Pop-up modal</Button>

<Modal size="md" animation={false} bind:open={popupModal}>
	<ModalContent>
		<ModalHeader title="Modal Title" />
		<ModalBody>
			<!-- Here you can write your own code! -->
		</ModalBody>
	</ModalContent>
</Modal>

Accessibility #

  • Content outside the modal is hidden from assistive technologies while it is open.
  • The modal optionally closes when interacting outside, or pressing the "Esc" key.
  • Focus is moved into the modal on mount, and restored to the trigger element on unmount.
  • While open, focus is contained within the modal, preventing the user from tabbing outside.
  • Scrolling the page behind the modal is prevented while it is open, including in mobile browsers.

API #

Modal provides APIs(Properties) that is necessary for you to configure a Modal compponent.

Modal Props #

Name Type Default Value
open boolean false
title string undefined
size 'sm' | 'md' | 'lg' | 'full' md
dismissable boolean true

Modal Handlers #

Name Type Description
on:keydown KeyboardEventHandler A key is pressed down.
on:mousedown MouseEventHandler A pointing device button (usually a mouse) is pressed on an element.

Modal Slots #

Name Description
base this slot is applied to the div element(`dialog` role).
overlay this slot is applied to the div element that overlays a whole screen.
wrapper this slot is applied to the div element(wrapper) for the modal body.
<Link Progress>