中断用户并期望其作出响应的模态确认对话框。
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button color="red">撤销访问</Button>
</AlertDialog.Trigger>
<AlertDialog.Content maxWidth="450px">
<AlertDialog.Title>撤销访问</AlertDialog.Title>
<AlertDialog.Description size="2">
您确定吗？该应用将不再可访问，所有现有会话将失效。
</AlertDialog.Description>
<Flex gap="3" mt="4" justify="end">
<AlertDialog.Cancel>
<Button variant="soft" color="gray">
取消
</Button>
</AlertDialog.Cancel>
<AlertDialog.Action>
<Button variant="solid" color="red">
撤销访问
</Button>
</AlertDialog.Action>
</Flex>
</AlertDialog.Content>
</AlertDialog.Root>
该组件继承自 Alert Dialog primitive 的部分和属性，并且在视觉上与 Dialog 完全相同，但语义和行为不同。
包含对话框的所有部分。
包裹将打开对话框的控件。
包含对话框的内容。该组件基于 div 元素。
| Prop | Type | Default |
|---|---|---|
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 |
一个可访问的标题，在对话框打开时进行宣布。该部分基于 Heading 组件，具有预定义的字体大小和顶部修剪。
一个可选的可访问描述，在对话框打开时进行宣布。该部分基于 Text 组件，具有预定义的字体大小。
如果您想完全移除描述，请删除该部分并将 aria-describedby={undefined} 传递给 Content。
包裹将关闭对话框的控件。此控件在视觉上应与 取消 控件区分开。
包裹将关闭对话框的控件。此控件在视觉上应与 操作 控件区分开。
使用 size 属性控制对话框的大小。它将影响内容的 padding 和 border-radius。
结合 width、minWidth 和 maxWidth 属性使用，以控制对话框的宽度。
<Flex gap="4" align="center">
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button variant="soft">大小 1</Button>
</AlertDialog.Trigger>
<AlertDialog.Content size="1" maxWidth="300px">
<Text as="p" trim="both" size="1">
快速的棕色狐狸跳过懒狗。
</Text>
</AlertDialog.Content>
</AlertDialog.Root>
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button variant="soft">大小 2</Button>
</AlertDialog.Trigger>
<AlertDialog.Content size="2" maxWidth="400px">
<Text as="p" trim="both" size="2">
快速的棕色狐狸跳过懒狗。
</Text>
</AlertDialog.Content>
</AlertDialog.Root>
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button variant="soft">大小 3</Button>
</AlertDialog.Trigger>
<AlertDialog.Content size="3" maxWidth="500px">
<Text as="p" trim="both" size="3">
快速的棕色狐狸跳过懒狗。
</Text>
</AlertDialog.Content>
</AlertDialog.Root>
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button variant="soft">大小 4</Button>
</AlertDialog.Trigger>
<AlertDialog.Content size="4">
<Text as="p" trim="both" size="4">
快速的棕色狐狸跳过懒狗。
</Text>
</AlertDialog.Content>
</AlertDialog.Root>
</Flex>
使用 Inset 组件将内容与对话框的边缘对齐。
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button color="red">删除用户</Button>
</AlertDialog.Trigger>
<AlertDialog.Content maxWidth="500px">
<AlertDialog.Title>删除用户</AlertDialog.Title>
<AlertDialog.Description size="2">
您确定要删除这些用户吗？此操作是永久的，无法撤销。
</AlertDialog.Description>
<Inset side="x" my="5">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>电子邮件</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>组别</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>开发者</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
<Table.Cell>zahra@example.com</Table.Cell>
<Table.Cell>管理员</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Inset>
<Flex gap="3" justify="end">
<AlertDialog.Cancel>
<Button variant="soft" color="gray">
取消
</Button>
</AlertDialog.Cancel>
<AlertDialog.Action>
<Button color="red">删除用户</Button>
</AlertDialog.Action>
</Flex>
</AlertDialog.Content>
</AlertDialog.Root>