警告对话框

模态确认对话框，会打断用户并期望用户做出响应。

查看源代码报告问题在 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 参考

此组件继承了部分 Alert Dialog 原语的部分和 props，并且在视觉上与 Dialog 相同，尽管语义和行为有所不同。

根

包含对话框的所有部分。

触发器

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

内容

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

属性	类型	默认值
`asChild`	`布尔值`	无默认值
`align`	`"start" \| "center"`	`"center"`
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"3"`
`width`	`Responsive<string>`	无默认值
`minWidth`	`Responsive<string>`	无默认值
`maxWidth`	`Responsive<string>`	`"600px"`
`height`	`Responsive<string>`	无默认值
`minHeight`	`Responsive<string>`	无默认值
`maxHeight`	`Responsive<string>`	无默认值

标题

一个可访问的标题，在对话框打开时会宣布。此部分基于 Heading 组件，并预定义了字体大小和顶部的前导修剪。

描述

一个可选的可访问描述，在对话框打开时会宣布。此部分基于 Text 组件，并预定义了字体大小。

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

操作

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

取消

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

示例

尺寸

使用 size 属性来控制对话框的尺寸。它会影响 padding 和 border-radius 的内容。将其与 width、minWidth 和 maxWidth 属性结合使用以控制对话框的宽度。

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

带内嵌内容

使用 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>[email protected]</Table.Cell>
            <Table.Cell>Developer</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
            <Table.Cell>[email protected]</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>

上一个Strong

下一个纵横比

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

实用程序

警告对话框