# Dialog

Modal dialog window displayed above the page.

```jsx
<Dialog.Root>

	<Dialog.Trigger>{target => target(Button, {

      children: "Edit profile"

    })}</Dialog.Trigger>



	<Dialog.Content maxWidth="450px">

		<Dialog.Title>Edit profile</Dialog.Title>

		<Dialog.Description size="2" mb="4">

			Make changes to your profile.

		</Dialog.Description>



		<Flex direction="column" gap="3">

			<label>

				<Text as="div" size="2" mb="1" weight="bold">

					Name

				</Text>

				<TextField.Root defaultValue="Freja Johnsen" placeholder="Enter your full name" />

			</label>

			<label>

				<Text as="div" size="2" mb="1" weight="bold">

					Email

				</Text>

				<TextField.Root defaultValue="freja@example.com" placeholder="Enter your email" />

			</label>

		</Flex>



		<Flex gap="3" mt="4" justify="end">

			<Dialog.Close>{target => target(Button, {

          "variant": "soft",

          "color": "gray",

          children: "Cancel"

        })}</Dialog.Close>

			<Dialog.Close>{target => target(Button, {

          children: "Save"

        })}</Dialog.Close>

		</Flex>

	</Dialog.Content>

</Dialog.Root>;
```

## API Reference

This component inherits props from the [Dialog primitive](/primitives/docs/components/dialog).

Note that this dialog is designed around the modal pattern, so the `modal` prop is unavailable.

### Root

Contains all the parts of a dialog.

### Trigger

Wraps the control that will open the dialog.

### Content

Contains the content of the dialog. This component is based on the `div` element.

| Prop                                                                                                                                                                   | Type                                   | Default    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                              | —          |
| `align`                                                                                                                                                                | `"start" \| "center"`                  | `"center"` |
| `size`                                                                                                                                                                 | `Responsive<"1" \| "2" \| "3" \| "4">` | `"3"`      |
| `width`                                                                                                                                                                | `Responsive<string>`                   | —          |
| `minWidth`                                                                                                                                                             | `Responsive<string>`                   | —          |
| `maxWidth`                                                                                                                                                             | `Responsive<string>`                   | `"600px"`  |
| `height`                                                                                                                                                               | `Responsive<string>`                   | —          |
| `minHeight`                                                                                                                                                            | `Responsive<string>`                   | —          |
| `maxHeight`                                                                                                                                                            | `Responsive<string>`                   | —          |

### Title

An accessible title that is announced when the dialog is opened. This part is based on the [Heading](/themes/docs/components/heading) component with a pre-defined font size and leading trim on top.

### Description

An optional accessible description that is announced when the dialog is opened. This part is based on the [Text](/themes/docs/components/text) component with a pre-defined font size.

If you want to remove the description entirely, remove this part and pass `aria-describedby={undefined}` to `Content`.

### Close

Wraps the control that will close the dialog.

## Examples

### Size

Use the `size` prop to control size of the dialog. It will affect the `padding` and `border-radius` of the Content. Use it in conjunction with the `width`, `minWidth` and `maxWidth` props to control the width of the dialog.

```jsx
<Flex gap="4" align="center">

	<Dialog.Root>

		<Dialog.Trigger>{target => target(Button, {

        "variant": "soft",

        children: "Size 1"

      })}</Dialog.Trigger>

		<Dialog.Content size="1" maxWidth="300px">

			<Text as="p" trim="both" size="1">

				The quick brown fox jumps over the lazy dog.

			</Text>

		</Dialog.Content>

	</Dialog.Root>



	<Dialog.Root>

		<Dialog.Trigger>{target => target(Button, {

        "variant": "soft",

        children: "Size 2"

      })}</Dialog.Trigger>

		<Dialog.Content size="2" maxWidth="400px">

			<Text as="p" trim="both" size="2">

				The quick brown fox jumps over the lazy dog.

			</Text>

		</Dialog.Content>

	</Dialog.Root>



	<Dialog.Root>

		<Dialog.Trigger>{target => target(Button, {

        "variant": "soft",

        children: "Size 3"

      })}</Dialog.Trigger>

		<Dialog.Content size="3" maxWidth="500px">

			<Text as="p" trim="both" size="3">

				The quick brown fox jumps over the lazy dog.

			</Text>

		</Dialog.Content>

	</Dialog.Root>



	<Dialog.Root>

		<Dialog.Trigger>{target => target(Button, {

        "variant": "soft",

        children: "Size 4"

      })}</Dialog.Trigger>

		<Dialog.Content size="4">

			<Text as="p" trim="both" size="4">

				The quick brown fox jumps over the lazy dog.

			</Text>

		</Dialog.Content>

	</Dialog.Root>

</Flex>;
```

### With inset content

Use the [Inset](/themes/docs/components/inset) component to align content flush with the sides of the dialog.

```jsx
<Dialog.Root>

	<Dialog.Trigger>{target => target(Button, {

      children: "View users"

    })}</Dialog.Trigger>

	<Dialog.Content>

		<Dialog.Title>Users</Dialog.Title>

		<Dialog.Description>

			The following users have access to this project.

		</Dialog.Description>



		<Inset side="x" my="5">

			<Table.Root>

				<Table.Header>

					<Table.Row>

						<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

						<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>

						<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>

					</Table.Row>

				</Table.Header>



				<Table.Body>

					<Table.Row>

						<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

						<Table.Cell>danilo@example.com</Table.Cell>

						<Table.Cell>Developer</Table.Cell>

					</Table.Row>



					<Table.Row>

						<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

						<Table.Cell>zahra@example.com</Table.Cell>

						<Table.Cell>Admin</Table.Cell>

					</Table.Row>

				</Table.Body>

			</Table.Root>

		</Inset>



		<Flex gap="3" justify="end">

			<Dialog.Close>{target => target(Button, {

          "variant": "soft",

          "color": "gray",

          children: "Close"

        })}</Dialog.Close>

		</Flex>

	</Dialog.Content>

</Dialog.Root>;
```