提示框

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

View source Report an issue View in Playground

您需要管理员权限才能安装和访问此应用程序。

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

API 参考

Root

将图标和文本部分组合在一起。此组件基于 div 元素，并支持常见的边距属性。

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

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

Text

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

示例

尺寸

使用 size 属性来控制大小。

您需要管理员权限才能安装和访问此应用程序。

<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 属性来控制视觉样式。

您需要管理员权限才能安装和访问此应用程序。

<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 属性分配特定的颜色。

您需要管理员权限才能安装和访问此应用程序。

<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 属性增加额外的对比度。

Radix 主题有更新可用。查看 3.2.0 版本的新功能。

<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 角色。屏幕阅读器将被打断，立即宣布新内容。

访问被拒绝。请联系网络管理员以查看此页面。

<Callout.Root color="red" role="alert">
	<Callout.Icon>
		<ExclamationTriangleIcon />
	</Callout.Icon>
	<Callout.Text>
		访问被拒绝。请联系网络管理员以查看此页面。
	</Callout.Text>
</Callout.Root>

上一篇按钮 Button

下一篇卡片Card

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

提示框