# 警告对话框

中断用户并期望其作出响应的模态确认对话框。

```jsx
<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>
```

## [API 参考](#api-参考)

该组件继承自 [Alert Dialog primitive](/primitives/docs/components/alert-dialog) 的部分和属性，并且在视觉上与 [Dialog](/themes/docs/components/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](/themes/docs/components/heading) 组件，具有预定义的字体大小和顶部修剪。

### [描述](#描述)

一个可选的可访问描述，在对话框打开时进行宣布。该部分基于 [Text](/themes/docs/components/text) 组件，具有预定义的字体大小。

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

### [操作](#操作)

包裹将关闭对话框的控件。此控件在视觉上应与 `取消` 控件区分开。

### [取消](#取消)

包裹将关闭对话框的控件。此控件在视觉上应与 `操作` 控件区分开。

## [示例](#示例)

### [大小](#大小)

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

```jsx
<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](/themes/docs/components/inset) 组件将内容与对话框的边缘对齐。

```jsx
<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>
```

<!--$-->

<!--/$-->