Icon Buttonアイコンボタン

アクションをトリガーするためのクリック可能なコンポーネントです。アイコンを使用してアクションの内容を視覚的に伝えます。

更新 2024/11/1

サイズ

Small、Medium、Largeの3種類があります。SmallはPCなどの大きな画面でマウス操作をする前提で使用することを推奨しており、モバイルなどタッチデバイスでは非推奨です。

Small

Medium

Large

import { IconButton } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton icon="add" size="small" />
        <p>Small</p>
      </VBox>
      <VBox>
        <IconButton icon="add" />
        <p>Medium</p>
      </VBox>
      <VBox>
        <IconButton icon="add" size="large" />
        <p>Large</p>
      </VBox>
    </HBox>
  );
}

バリエーション

3種類のバリエーションがあり、アクションの重要度に応じて使い分けてください。重要度が高いアクションにはFilledを使用し、その他のアクションにはGhostやOutlinedを使用してください。同一画面内に複数のFilledを並べることは非推奨です。

Filled

Outlined

Ghost

import { IconButton } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton icon="add" />
        <p>Filled</p>
      </VBox>
      <VBox>
        <IconButton icon="add" styleType="outlined" />
        <p>Outlined</p>
      </VBox>
      <VBox>
        <IconButton icon="add" styleType="ghost" />
        <p>Ghost</p>
      </VBox>
    </HBox>
  );
}

シェイプ

CircleとRectangleの2種類があります。

Circle

Rectangle

import { IconButton } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function ShapeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton shape="circle" icon="add" />
        <p>Circle</p>
      </VBox>
      <VBox>
        <IconButton shape="rectangle" styleType="outlined" icon="add" />
        <p>Rectangle</p>
      </VBox>
    </HBox>
  );
}

状態

バリエーションごとに4種類の状態があります。DisabledはTextFieldなど他のコンポーネントの状態と連動して使用してください。

	Enabled	Hover	Focus Visible	Disabled
filled
ghost
outlined