图标按钮

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

View source Report an issue View in Playground

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

API 参考

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

Prop	Type	Default
`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`

示例

尺寸

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

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

<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 变体显示没有边框的按钮。幽灵按钮在布局中表现得像文本，因为它们使用负边距相对于其兄弟元素进行光学对齐，同时在活动和悬停状态下保持内边距。

<IconButton variant="ghost">
	<MagnifyingGlassIcon width="18" height="18" />
</IconButton>

颜色

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

高对比度

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

<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 属性指定特定的半径值。

<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 属性在按钮内容位置显示加载旋转器。按钮在加载时将被禁用。

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

上一篇悬停卡片 Hover Card

下一篇插入 Inset

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

图标按钮

幽灵