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

图标按钮

专为单个图标使用而设计的按钮。

View sourceReport an issueView in Playground
<IconButton>

	<MagnifyingGlassIcon width="18" height="18" />

</IconButton>

API 参考

¥API Reference

此组件基于 button 元素并支持 常用边距属性。

¥This component is based on the button element and supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3" | "4">
"2"
variant
enum
"solid"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value
loading
boolean
false

示例

¥Examples

尺寸

¥Size

使用 size 属性控制按钮的大小。

¥Use the size prop to control the size of the button.

<Flex align="center" gap="3">

	<IconButton size="1" variant="soft">

		<MagnifyingGlassIcon width="15" height="15" />

	</IconButton>



	<IconButton size="2" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>



	<IconButton size="3" variant="soft">

		<MagnifyingGlassIcon width="22" height="22" />

	</IconButton>

</Flex>

变体

¥Variant

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

¥Use the variant prop to control the visual style of the button.

<Flex gap="3">

	<IconButton variant="classic">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton variant="solid">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton variant="surface">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton variant="outline">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

</Flex>

幽灵

¥Ghost

使用 ghost 变体显示不带镶边的按钮。幽灵按钮在布局中的行为类似于文本，因为它们使用负边距使其与兄弟按钮在视觉上对齐，同时在活动和悬停状态下保持填充。

¥Use the ghost variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states.

<IconButton variant="ghost">

	<MagnifyingGlassIcon width="18" height="18" />

</IconButton>

颜色

¥Color

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

¥Use the color prop to assign a specific color.

<Flex gap="3">

	<IconButton color="crimson" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton color="indigo" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton color="grass" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton color="orange" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<Flex direction="column" gap="3">

	<Flex gap="3">

		<IconButton color="gray" variant="classic">

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="solid">

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="soft">

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="surface">

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="outline">

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

	</Flex>

	<Flex gap="3">

		<IconButton color="gray" variant="classic" highContrast>

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="solid" highContrast>

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="soft" highContrast>

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="surface" highContrast>

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

		<IconButton color="gray" variant="outline" highContrast>

			<MagnifyingGlassIcon width="18" height="18" />

		</IconButton>

	</Flex>

</Flex>

圆角

¥Radius

使用 radius 属性指定特定的圆角值。

¥Use the radius prop to assign a specific radius value.

<Flex gap="3">

	<IconButton radius="none" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton radius="large" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton radius="full" variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

</Flex>

加载中

¥Loading

使用 loading 属性显示加载旋转图标来代替按钮内容。该按钮在加载时将被禁用。

¥Use the loading prop to display a loading spinner in place of button content. The button will be disabled while loading.

<Flex gap="3">

	<IconButton loading variant="classic">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton loading variant="solid">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton loading variant="soft">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton loading variant="surface">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

	<IconButton loading variant="outline">

		<MagnifyingGlassIcon width="18" height="18" />

	</IconButton>

</Flex>
Previous悬停卡片
Next插入