Modal

A barebone centered modal component for critical actions or information.

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	`false`	Controls the visibility of the modal. Supports $bindable.
`closeOnBackdropClick`	`boolean`	`true`	Whether clicking the backdrop closes the modal.
`scrollLock`	`boolean`	`true`	Whether to lock body scroll when the modal is open.
`variant`	`string`	`''`	Custom variant class for theming.
`componentId`	`string`	`crypto.randomUUID()`	The unique identifier for the component wrapper.
`transitionFn`	`function`	`scale`	Svelte transition function for the modal panel.
`transitionParams`	`object`	`{ duration: 200, start: 0.95 }`	Parameters for the panel transition.
`backdropTransitionFn`	`function`	`fade`	Svelte transition function for the backdrop.
`backdropTransitionParams`	`object`	`{ duration: 200 }`	Parameters for the backdrop transition.
`children`	`Snippet`	`required`	The content of the modal.

A classic centered modal component for critical actions or information.

Standard centered modal with a backdrop.

<script>

  import { Modal } from 'fluid-ui-svelte/components';

  import { Button, Text, Container } from 'fluid-ui-svelte/base';

  let isModalOpen = $state(false);

</script>

<Button onclick={async () => isModalOpen = true}>Open Modal</Button>

<Modal bind:isOpen={isModalOpen}>

  <Container class="p-6 flex flex-col gap-4">

    <Text type="h2">Modal Title</Text>

    <Text>This is a barebone modal component.</Text>

    <Button onclick={async () => isModalOpen = false}>Close</Button>

  </Container>

</Modal>