# Modal

> A pre-animated preset of Dialog: the same native `<dialog>` panel, its `::backdrop` treatment, and every compound part, with the panel's own pop-in and pop-out motion — a fade paired with a scale, entering from slightly smaller than rest and leaving faster, shrinking only halfway back and blurring softly as it fades — already wired onto the host.

```ts
import { Modal } from "@sdxc/ui";
```

Renders Dialog with its panel's pop-in/pop-out motion pre-wired
through `mix`, collapsing to an opacity-only fade under reduced motion.
A `mix` passed to Modal layers alongside the built-in motion.

## Examples

```tsx
<Button commandfor="welcome" command="show-modal">{t("welcome.cta")}</Button>
<Modal id="welcome" aria-labelledby="welcome-title">
	<Modal.Header>
		<Modal.Title id="welcome-title">{t("welcome.title")}</Modal.Title>
	</Modal.Header>
</Modal>
```

```tsx
<Modal id="confirm-delete" aria-labelledby="confirm-delete-title">
	<Modal.Close commandfor="confirm-delete" aria-label={t("actions.close")} />
	<Modal.Header>
		<Modal.Title id="confirm-delete-title">{t("project.deleteTitle")}</Modal.Title>
		<Modal.Description>{t("project.deleteDescription")}</Modal.Description>
	</Modal.Header>
	<Modal.Footer>
		<Button commandfor="confirm-delete" command="close" color="danger">{t("actions.delete")}</Button>
	</Modal.Footer>
</Modal>
```

## Props

Also accepts everything in `Dialog.Props`.