# Modal

## Example

```svelte
<script lang="ts">
	import { Button, Modal, ImageContainer, Subheading } from '@foxui/all';

	import cute from '$lib/assets/images/cute.webp';

	let open = $state(false);
</script>

<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>
```

## Documentation

## Usage

```svelte
<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>
```

## Sources

This component uses the bits-ui component: Dialog, see here for the documentation for that: https://bits-ui.com/docs/components/dialog/llms.txt

## API Reference

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | `boolean` | `false` | Whether the modal is open. (bindable) |
| children | `Snippet` | `-` | The content to display inside the modal. (required) |
| closeButton | `boolean` | `true` | Whether to show the close button in the top-right corner. |
| interactOutsideBehavior | `'close' | 'ignore'` | `'close'` | How the modal responds to clicks outside its content. |
| onOpenAutoFocus | `(event: Event) => void` | `-` | Callback when focus is moved into the modal on open. Call event.preventDefault() to prevent default focus behavior. |
| contentProps | `Dialog.ContentProps` | `-` | Additional props to pass to the underlying Dialog.Content component. |
| onOpenChange | `(open: boolean) => void` | `-` | A callback invoked when the open state changes. |
| onOpenChangeComplete | `(open: boolean) => void` | `-` | A callback invoked after the open/close transition completes. |
| class | `string` | `-` | Additional CSS classes to apply to the modal content. |