Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

标注

用于吸引用户注意力的简短信息。

View sourceReport an issueView in Playground

You will need admin privileges to install and access this application.

<Callout.Root>

	<Callout.Icon>

		<InfoCircledIcon />

	</Callout.Icon>

	<Callout.Text>

		You will need admin privileges to install and access this application.

	</Callout.Text>

</Callout.Root>

API 参考

¥API Reference

根

¥Root

图标和文本部分分组。此组件基于 div 元素并支持 常用边距属性。

¥Groups Icon and Text parts. This component is based on the div element and supports common margin props.

PropTypeDefault
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 元素。

¥Provides width and height for the icon associated with the callout. This component is based on the div element.

文本

¥Text

渲染标注文本。此组件基于 p 元素。

¥Renders the callout text. This component is based on the p element.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

<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

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

¥Use the variant prop to control the visual style.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

<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

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

You will need admin privileges to install and access this application.

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

高对比度

¥High-contrast

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

¥Use the HighContrast prop to add additional contrast.

An update to Radix Themes is available. See what’s new in version 3.2.0.

An update to Radix Themes is available. See what’s new in version 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>

作为警报

¥As alert

在需要用户立即注意时（例如出现错误消息时），在标注中添加原生 WAI-ARIA alert 角色。屏幕阅读器将被中断，并立即播报新内容。

¥Add a native WAI-ARIA alert role to the callout when the user’s immediate attention is required, like when an error message appears. The screen reader will be interrupted, announcing the new content immediately.

<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>
Previous按钮
Next卡片