Dialog

페이지 위에 표시되는 모달 대화상자입니다.

View source Report an issue View in Playground

<Dialog.Root>
	<Dialog.Trigger>
		<Button>Edit profile</Button>
	</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>
				<Button variant="soft" color="gray">
					Cancel
				</Button>
			</Dialog.Close>
			<Dialog.Close>
				<Button>Save</Button>
			</Dialog.Close>
		</Flex>
	</Dialog.Content>
</Dialog.Root>

API Reference

이 컴포넌트는 Dialog primitive의 props를 상속받습니다.

이 대화상자는 모달 패턴으로 설계되어 있어 modal prop은 사용할 수 없습니다.

Root

대화상자의 모든 부분을 포함합니다.

Trigger

대화상자를 열 컨트롤을 감싸는 래퍼입니다.

Content

대화상자의 내용을 포함합니다. 이 컴포넌트는 div 요소를 기반으로 합니다.

Prop	Type	Default
`asChild`	`boolean`	No default value
`fullscreen`	`boolean`	`"false"`
`align`	`"start" \| "center"`	`"center"`
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"3"`
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	`"600px"`
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value

Title

대화상자가 열릴 때 알려지는 접근 가능한 제목입니다. 이 부분은 미리 정의된 글꼴 크기와 상단 여백이 있는 Heading 컴포넌트를 기반으로 합니다.

Description

대화상자가 열릴 때 알려지는 선택적인 접근 가능한 설명입니다. 이 부분은 미리 정의된 글꼴 크기를 가진 Text 컴포넌트를 기반으로 합니다.

설명을 완전히 제거하려면 이 부분을 제거하고 Content에 aria-describedby={undefined}를 전달하세요.

Close

대화상자를 닫을 컨트롤을 감싸는 래퍼입니다.

Examples

Size

size prop을 사용하여 대화상자의 크기를 제어할 수 있습니다. 이는 padding과 border-radius에 영향을 미칩니다. width, minWidth, maxWidth prop과 함께 사용하여 대화상자의 너비를 제어할 수 있습니다.

<Flex gap="4" align="center">
	<Dialog.Root>
		<Dialog.Trigger>
			<Button variant="soft">Size 1</Button>
		</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>
			<Button variant="soft">Size 2</Button>
		</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>
			<Button variant="soft">Size 3</Button>
		</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>
			<Button variant="soft">Size 4</Button>
		</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

Inset 컴포넌트를 사용하여 내용을 대화상자의 가장자리에 맞춰 정렬할 수 있습니다.

<Dialog.Root>
	<Dialog.Trigger>
		<Button>View users</Button>
	</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>
				<Button variant="soft" color="gray">
					Close
				</Button>
			</Dialog.Close>
		</Flex>
	</Dialog.Content>
</Dialog.Root>

fullscreen

<Dialog.Root>
	<Dialog.Trigger>
		<Button>View users</Button>
	</Dialog.Trigger>
	<Dialog.Content fullscreen={true}>
		<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>
				<Button variant="soft" color="gray">
					Close
				</Button>
			</Dialog.Close>
		</Flex>
	</Dialog.Content>
</Dialog.Root>

PreviousData List

NextDataGrid

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities