Modal

Example

Usage

		<Button onclick={() => (open = true)} variant="secondary">Open Modal</Button>

<Modal bind:open={open} closeButton={false}>
	<Subheading>
		You can put anything in here... Like an image:
	</Subheading>

	<ImageContainer
		src={cute}
		alt="image in modal"
		useThemeColor
		containerClasses="max-w-64 mx-auto"
	/>

	<Button onclick={() => (open = false)}>Cool</Button>
</Modal>

API Reference

Modal

A dialog overlay that requires user interaction. Built on top of the bits-ui Dialog primitive.

Property Type Description

open $bindable

boolean

Whether the modal is open. Default: false

children required

Snippet

The content to display inside the modal.

closeButton

boolean

Whether to show the close button in the top-right corner. Default: true

interactOutsideBehavior

enum

How the modal responds to clicks outside its content. Default: 'close'

onOpenAutoFocus

function

Callback when focus is moved into the modal on open. Call event.preventDefault() to prevent default focus behavior. Default: —

contentProps

Dialog.ContentProps

Additional props to pass to the underlying Dialog.Content component. Default: —

onOpenChange

function

A callback invoked when the open state changes. Default: —

onOpenChangeComplete

function

A callback invoked after the open/close transition completes. Default: —

class

string

Additional CSS classes to apply to the modal content. Default: —

Property

open

children

closeButton

interactOutsideBehavior

onOpenAutoFocus

contentProps

onOpenChange

onOpenChangeComplete

class