吸引用户注意的简短消息。
您需要管理员权限才能安装和访问此应用程序。
<Callout.Root>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
组图标和文本部分。此组件基于 div 元素，并支持 常见的边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | boolean | 无默认值 |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "soft" | "surface" | "outline" | "soft" |
color | 枚举 | 无默认值 |
highContrast | boolean | 无默认值 |
提供与提示相关的图标的宽度和高度。此组件基于 div 元素。
呈现提示文本。此组件基于 p 元素。
使用 size 属性控制尺寸。
您需要管理员权限才能安装和访问此应用程序。
您需要管理员权限才能安装和访问此应用程序。
您需要管理员权限才能安装和访问此应用程序。
<Flex direction="column" gap="3" align="start">
<Callout.Root size="1">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="2">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="3">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 variant 属性控制视觉样式。
<Flex direction="column" gap="3">
<Callout.Root variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="surface">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="outline">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 color 属性指定特定的 颜色。
<Flex direction="column" gap="3">
<Callout.Root color="blue">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="green">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="red">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 HighContrast 属性添加额外的对比度。
Radix Themes 的更新可用。查看 3.2.0 版本的新功能。
Radix Themes 的更新可用。查看 3.2.0 版本的新功能。
<Flex direction="column" gap="3">
<Callout.Root color="gray" variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
<Callout.Root color="gray" variant="soft" highContrast>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
</Flex>
将本地的 WAI-ARIA alert 角色 添加到提示中，当需要用户的立即关注时（例如错误消息出现时），屏幕阅读器会中断，立即宣布新内容。
访问被拒绝。请联系网络管理员以查看此页面。
<Callout.Root color="red" role="alert">
<Callout.Icon>
<ExclamationTriangleIcon />
</Callout.Icon>
<Callout.Text>
Access denied. Please contact the network administrator to view this page.
</Callout.Text>
</Callout.Root>