# 提示框

吸引用户注意的简短消息。

```jsx
<Callout.Root>
  <Callout.Icon>
    <InfoCircledIcon />
  </Callout.Icon>

  <Callout.Text>您需要管理员权限才能安装和访问此应用程序。</Callout.Text>
</Callout.Root>
```

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

### [Root](#root)

将图标和文本部分组合在一起。此组件基于 `div` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                               | Default          |
| -------------- | ---------------------------------- | ---------------- |
| `asChild`      | `boolean`                          | No default value |
| `size`         | `Responsive<"1" \| "2" \| "3">`    | `"2"`            |
| `variant`      | `"soft" \| "surface" \| "outline"` | `"soft"`         |
| `color`        | `enum`                             | No default value |
| `highContrast` | `boolean`                          | No default value |

### [Icon](#icon)

为与提示框关联的图标提供宽度和高度。该组件基于 `div` 元素。

### [Text](#text)

渲染提示框文本。该组件基于 `p` 元素。

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制大小。

```jsx
<Flex direction="column" gap="3" align="start">
  <Callout.Root size="1">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>您需要管理员权限才能安装和访问此应用程序。</Callout.Text>
  </Callout.Root>

  <Callout.Root size="2">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>您需要管理员权限才能安装和访问此应用程序。</Callout.Text>
  </Callout.Root>

  <Callout.Root size="3">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>您需要管理员权限才能安装和访问此应用程序。</Callout.Text>
  </Callout.Root>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制视觉样式。

```jsx
<Flex direction="column" gap="3">
  <Callout.Root variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="surface">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="outline">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" gap="3">
  <Callout.Root color="blue">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="green">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="red">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      您需要 <Link href="#">管理员权限</Link> 才能安装和访问此应用程序。
    </Callout.Text>
  </Callout.Root>
</Flex>
```

### [高对比度](#高对比度)

使用 `HighContrast` 属性增加额外的对比度。

```jsx
<Flex direction="column" gap="3">
  <Callout.Root color="gray" variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>Radix 主题有更新可用。查看 3.2.0 版本的新功能。</Callout.Text>
  </Callout.Root>

  <Callout.Root color="gray" variant="soft" highContrast>
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>Radix 主题有更新可用。查看 3.2.0 版本的新功能。</Callout.Text>
  </Callout.Root>
</Flex>
```

### [作为警报](#作为警报)

当用户的即时注意力需要时，例如出现错误消息时，向提示框添加本地 [WAI-ARIA `alert` 角色](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)。屏幕阅读器将被打断，立即宣布新内容。

```jsx
<Callout.Root color="red" role="alert">
  <Callout.Icon>
    <ExclamationTriangleIcon />
  </Callout.Icon>

  <Callout.Text>访问被拒绝。请联系网络管理员以查看此页面。</Callout.Text>
</Callout.Root>
```

<!--$-->

<!--/$-->