Icon Buttonアイコンボタン
アクションをトリガーするためのクリック可能なコンポーネントです。アイコンを使用してアクションの内容を視覚的に伝えます。
更新 2024/11/1
サイズ
Small、Medium、Largeの3種類があります。SmallはPCなどの大きな画面でマウス操作をする前提で使用することを推奨しており、モバイルなどタッチデバイスでは非推奨です。
Small
Medium
Large
import { IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox, VBox } from "src/components/LayoutUtils";
export function SizeSample() {
return (
<HBox>
<VBox>
<IconButton icon={<SerendieSymbol name={"add"} />} size="small" />
<p>Small</p>
</VBox>
<VBox>
<IconButton icon={<SerendieSymbol name={"add"} />} />
<p>Medium</p>
</VBox>
<VBox>
<IconButton icon={<SerendieSymbol name={"add"} />} size="large" />
<p>Large</p>
</VBox>
</HBox>
);
}
バリエーション
3種類のバリエーションがあり、アクションの重要度に応じて使い分けてください。重要度が高いアクションにはFilledを使用し、その他のアクションにはGhostやOutlinedを使用してください。同一画面内に複数のFilledを並べることは非推奨です。
Filled
Outlined
Ghost
import { IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox, VBox } from "src/components/LayoutUtils";
export function TypeSample() {
return (
<HBox>
<VBox>
<IconButton icon={<SerendieSymbol name={"add"} />} />
<p>Filled</p>
</VBox>
<VBox>
<IconButton
icon={<SerendieSymbol name={"add"} />}
styleType="outlined"
/>
<p>Outlined</p>
</VBox>
<VBox>
<IconButton icon={<SerendieSymbol name={"add"} />} styleType="ghost" />
<p>Ghost</p>
</VBox>
</HBox>
);
}
シェイプ
CircleとRectangleの2種類があります。
Circle
Rectangle
import { IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox, VBox } from "src/components/LayoutUtils";
export function ShapeSample() {
return (
<HBox>
<VBox>
<IconButton shape="circle" icon={<SerendieSymbol name={"add"} />} />
<p>Circle</p>
</VBox>
<VBox>
<IconButton
shape="rectangle"
styleType="outlined"
icon={<SerendieSymbol name={"add"} />}
/>
<p>Rectangle</p>
</VBox>
</HBox>
);
}
状態
バリエーションごとに4種類の状態があります。DisabledはTextFieldなど他のコンポーネントの状態と連動して使用してください。
Enabled | Hover | Focus Visible | Disabled | |
---|---|---|---|---|
filled | ||||
ghost | ||||
outlined |