专门为使用单个图标而设计的按钮。
<IconButton>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
此组件基于 button 元素，并支持常用的 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | Responsive<"1" | "2" | "3" | "4"> | "2" |
variant | 枚举 | "solid" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
loading | 布尔值 | 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>