图标按钮

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

查看源代码报告问题在 Playground 中查看

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

API 参考

此组件基于 button 元素，并支持常用的 margin 属性。

属性	类型	默认值
`asChild`	`布尔值`	无默认值
`size`	`响应式<"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>

上一页悬停卡片

下一页内嵌

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

实用程序

图标按钮

幽灵