アイコンボタン

単一のアイコンでの使用に特化したデザインのボタン。

ソースを表示問題を報告

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

APIリファレンス

このコンポーネントはbutton要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"2"`
`variant`	`enum`	`"solid"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし
`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>

前ホバーカード

次インセット

GitHubでこのページを編集。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

アイコンボタン

ゴースト