Buttonボタン

アクションをトリガーするためのクリック可能なコンポーネントです。

更新 2024/11/1

サイズ

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

import { Button } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <HBox>
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
    </HBox>
  );
}

バリエーション

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

import { Button } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <HBox>
      <Button>Filled</Button>
      <Button styleType="outlined">Outlined</Button>
      <Button styleType="ghost">Ghost</Button>
      <Button styleType="rectangle">Rectangle</Button>
    </HBox>
  );
}

アイコン付きボタン

ラベルの左右にアイコンを入れることができます。ボタンがトリガーするアクションを視覚的にユーザーに伝えることができます。

import { Button } from "@serendie/ui";
import { SvgIcon } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function IconSample() {
  return (
    <HBox>
      <Button leftIcon={<SvgIcon icon="chevron_left" />}>LeftIcon</Button>
      <Button rightIcon={<SvgIcon icon="chevron_right" />} styleType="ghost">
        RightIcon
      </Button>
    </HBox>
  );
}

状態

バリエーションごとに5種類の状態があります。DisabledはTextFieldなど他のコンポーネントの状態と連動して使用してください。ボタン押下後にアクションを即座に処理できない場合は、Loadingを使いユーザーに待ち状態を伝えてください。

	Enabled	Hover	Focus Visible	Disabled	Loading
filled
ghost
outlined
rectangle