Themes
Advanced
Utils
Components

Alert Dialog

사용자를 중단시키고 응답을 기대하는 모달 확인 대화상자입니다.

View sourceReport an issueView in Playground
<AlertDialog.Root>

	<AlertDialog.Trigger>

		<Button color="red">Revoke access</Button>

	</AlertDialog.Trigger>

	<AlertDialog.Content maxWidth="450px">

		<AlertDialog.Title>Revoke access</AlertDialog.Title>

		<AlertDialog.Description size="2">

			Are you sure? This application will no longer be accessible and any

			existing sessions will be expired.

		</AlertDialog.Description>



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

			<AlertDialog.Cancel>

				<Button variant="soft" color="gray">

					Cancel

				</Button>

			</AlertDialog.Cancel>

			<AlertDialog.Action>

				<Button variant="solid" color="red">

					Revoke access

				</Button>

			</AlertDialog.Action>

		</Flex>

	</AlertDialog.Content>

</AlertDialog.Root>

API Reference

이 구성 요소는 alert-dialog primitive에서 일부와 props를 상속받으며, dialog와 시각적으로 동일하지만 의미와 동작이 다릅니다.

Root

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

Trigger

대화상자를 열기 위한 컨트롤을 감쌉니다.

Content

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

PropTypeDefault
asChild
boolean
No default value
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}를 전달하세요.

Action

대화상자를 닫는 컨트롤을 감쌉니다. 이 컨트롤은 Cancel 컨트롤과 시각적으로 구별되어야 합니다.

Cancel

대화상자를 닫는 컨트롤을 감쌉니다. 이 컨트롤은 Action 컨트롤과 시각적으로 구별되어야 합니다.

Examples

Size

size prop을 사용하여 대화상자의 크기를 제어합니다. 이는 Content의 padding 및 border-radius에 영향을 미칩니다. width, minWidth, maxWidth props와 함께 사용하여 대화상자의 너비를 제어하세요.

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

	<AlertDialog.Root>

		<AlertDialog.Trigger>

			<Button variant="soft">Size 1</Button>

		</AlertDialog.Trigger>

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

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

				The quick brown fox jumps over the lazy dog.

			</Text>

		</AlertDialog.Content>

	</AlertDialog.Root>



	<AlertDialog.Root>

		<AlertDialog.Trigger>

			<Button variant="soft">Size 2</Button>

		</AlertDialog.Trigger>

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

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

				The quick brown fox jumps over the lazy dog.

			</Text>

		</AlertDialog.Content>

	</AlertDialog.Root>



	<AlertDialog.Root>

		<AlertDialog.Trigger>

			<Button variant="soft">Size 3</Button>

		</AlertDialog.Trigger>

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

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

				The quick brown fox jumps over the lazy dog.

			</Text>

		</AlertDialog.Content>

	</AlertDialog.Root>



	<AlertDialog.Root>

		<AlertDialog.Trigger>

			<Button variant="soft">Size 4</Button>

		</AlertDialog.Trigger>

		<AlertDialog.Content size="4">

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

				The quick brown fox jumps over the lazy dog.

			</Text>

		</AlertDialog.Content>

	</AlertDialog.Root>

</Flex>

With inset content

Inset 구성 요소를 사용하여 콘텐츠를 대화상자의 측면에 맞추어 정렬합니다.

<AlertDialog.Root>

	<AlertDialog.Trigger>

		<Button color="red">Delete users</Button>

	</AlertDialog.Trigger>

	<AlertDialog.Content maxWidth="500px">

		<AlertDialog.Title>Delete Users</AlertDialog.Title>

		<AlertDialog.Description size="2">

			Are you sure you want to delete these users? This action is permanent and

			cannot be undone.

		</AlertDialog.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">

			<AlertDialog.Cancel>

				<Button variant="soft" color="gray">

					Cancel

				</Button>

			</AlertDialog.Cancel>

			<AlertDialog.Action>

				<Button color="red">Delete users</Button>

			</AlertDialog.Action>

		</Flex>

	</AlertDialog.Content>

</AlertDialog.Root>
PreviousAccordion
NextAspect Ratio
Edit this page on GitHub.