Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

警告对话框

打断用户并期望响应的模态确认对话框。

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 参考

¥API Reference

此组件继承了 警报对话框基础组件 的部件和属性，并且在视觉上与 对话框 完全相同，但语义和行为有所不同。

¥This component inherits parts and props from the Alert Dialog primitive and is visually identical to Dialog, though with differing semantics and behavior.

根

¥Root

包含对话框的所有部分。

¥Contains all the parts of the dialog.

触发器

¥Trigger

封装将打开对话框的控件。

¥Wraps the control that will open the dialog.

内容

¥Content

包含对话框的内容。此组件基于 div 元素。

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

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

对话框打开时会显示可访问的标题。这部分基于 标题 组件，具有预定义的字体大小和顶部的行距修剪。

¥An accessible title that is announced when the dialog is opened. This part is based on the 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 component with a pre-defined font size.

如果你想完全删除描述，请删除此部分并将 aria-describedby={undefined} 传递给 Content。

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

操作

¥Action

封装将关闭对话框的控件。这应该在视觉上与 Cancel 控件区分开来。

¥Wraps the control that will close the dialog. This should be distinguished visually from the Cancel control.

取消

¥Cancel

封装将关闭对话框的控件。这应该在视觉上与 Action 控件区分开来。

¥Wraps the control that will close the dialog. This should be distinguished visually from the Action control.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制对话框的大小。它会影响内容的 padding 和 border-radius。与 width、minWidth 和 maxWidth props 结合使用，以控制对话框的宽度。

¥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.

<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

使用 插入 组件将内容与对话框边缘对齐。

¥Use the Inset component to align content flush with the sides of the dialog.

<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>
Previous强文本
Next宽高比