---
title: ボタン
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="ヘッダー" />
</Frame>

アプリ全体で使用されるボタンおよびボタングループの一覧。

## ボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";

    export const MyComponent = () => {
      return (
        <Button
          className
          Icon={null}
          title="タイトル"
          fullWidth={false}
          variant="primary"
          size="medium"
          position="standalone"
          accent="default"
          soon={false}
          disabled={false}
          focus={true}
          onClick={() => console.log("クリック")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ     | タイプ                   | 説明                                                                 |
    | --------- | --------------------- | ------------------------------------------------------------------ |
    | className | string                | 追加のスタイリングのためのオプションクラス名                                             |
    | アイコン      | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
    | タイトル      | string                | ボタンのテキスト内容                                                         |
    | fullWidth | ブール型                  | ボタンがコンテナの全幅を占めるかどうかを定義します                                          |
    | バリアント     | string                | ボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます   |
    | サイズ       | string                | ボタンのサイズ。 オプションは2つ：`small` と `medium`                               |
    | "位置"      | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
    | accent    | string                | ボタンのアクセント色。 オプションは `default`、`blue`、`danger` を含みます                 |
    | 間もなく      | ブール型                  | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。                    |
    | disabled  | ブール型                  | ボタンが無効かどうかを指定します                                                   |
    | focus     | ブール型                  | ボタンにフォーカスがあるかどうかを決定します                                             |
    | onClick   | function              | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                                  |
  </Tab>
</Tabs>

## ボタングループ

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";
    import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

    export const MyComponent = () => {
      return (
        <ButtonGroup variant="primary" size="large" accent="blue" className>
          <Button
            className
            Icon={null}
            title="ボタン 1"
            fullWidth={false}
            variant="primary"
            size="medium"
            position="standalone"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("クリック")}
          />
          <Button
            className
            Icon={null}
            title="ボタン 2"
            fullWidth={false}
            variant="secondary"
            size="medium"
            position="left"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("クリック")}
          />
          <Button
            className
            Icon={null}
            title="ボタン 3"
            fullWidth={false}
            variant="tertiary"
            size="medium"
            position="right"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("クリック")}
          />
        </ButtonGroup>
      );
    };

    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ     | タイプ       | 説明                                                                     |
    | --------- | --------- | ---------------------------------------------------------------------- |
    | バリアント     | string    | グループ内のボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます |
    | サイズ       | string    | グループ内のボタンのサイズ。 オプションは2つ：`medium` と `small`                             |
    | accent    | string    | グループ内のボタンのアクセント色。 オプションは `default`、`blue`、 `danger` を含みます              |
    | className | string    | 追加のスタイリングのためのオプションクラス名                                                 |
    | children  | ReactNode | グループ内の個々のボタンを表す React エレメントの配列                                         |
  </Tab>
</Tabs>

## 浮動ボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButton
          className
          Icon={IconSearch}
          title="タイトル"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ       | タイプ                   | 説明                                                                 |
    | ----------- | --------------------- | ------------------------------------------------------------------ |
    | className   | string                | 追加のスタイリングのためのオプション名                                                |
    | アイコン        | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
    | タイトル        | string                | ボタンのテキスト内容                                                         |
    | サイズ         | string                | ボタンのサイズ。 オプションは2つ：`small` と `medium`                               |
    | "位置"        | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`middle`、 `right` を含みます |
    | applyShadow | ブール型                  | ボタンにシャドウを適用するかどうかを決定します                                            |
    | applyBlur   | ブール型                  | ボタンにぼかし効果を適用するかどうかを決定します                                           |
    | disabled    | ブール型                  | ボタンが無効かどうかを決定します                                                   |
    | focus       | ブール型                  | ボタンにフォーカスがあるかどうかを示します                                              |
  </Tab>
</Tabs>

## 浮動ボタングループ

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButtonGroup size="small">
          <FloatingButton
            className
            Icon={IconClipboardText}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
            focus={true}
          />
          <FloatingButton
            className
            Icon={IconCheckbox}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
          />
        </FloatingButtonGroup>
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ    | タイプ       | 説明                                   | デフォルト |
    | -------- | --------- | ------------------------------------ | ----- |
    | サイズ      | string    | ボタンのサイズ。 オプションは2つ：`small` と `medium` | small |
    | children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列       |       |
  </Tab>
</Tabs>

## 浮動アイコンボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingIconButton
          className
          Icon={IconSearch}
          size="small"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={false}
          onClick={() => console.log("クリック")}
          isActive={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ       | タイプ                   | 説明                                                                 |
    | ----------- | --------------------- | ------------------------------------------------------------------ |
    | className   | string                | 追加のスタイリングのためのオプション名                                                |
    | アイコン        | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
    | サイズ         | string                | ボタンのサイズ。 オプションは2つ：`small` と `medium`                               |
    | "位置"        | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
    | applyShadow | ブール型                  | ボタンにシャドウを適用するかどうかを決定します                                            |
    | applyBlur   | ブール型                  | ボタンにぼかし効果を適用するかどうかを決定します                                           |
    | disabled    | ブール型                  | ボタンが無効かどうかを決定します                                                   |
    | focus       | ブール型                  | ボタンにフォーカスがあるかどうかを示します                                              |
    | onClick     | function              | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                                  |
    | isActive    | ブール型                  | ボタンがアクティブな状態にあるかどうかを決定します                                          |
  </Tab>
</Tabs>

## 浮動アイコンボタングループ

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      const iconButtons = [
        {
          Icon: IconClipboardText,
          onClick: () => console.log("ボタン 1 がクリックされました"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("ボタン 2 がクリックされました"),
          isActive: true,
        },
      ];

      return (
        <FloatingIconButtonGroup
        className
        size="small"
        iconButtons={iconButtons} />
      );
    };

    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ       | タイプ    | 説明                                                                                                                       |
    | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
    | className   | string | 追加のスタイリングのためのオプション名                                                                                                      |
    | サイズ         | string | ボタンのサイズ。 オプションは2つ：`small` と `medium`                                                                                     |
    | iconButtons | array  | グループ内のアイコンボタンをそれぞれ表すオブジェクトの配列。 各オブジェクトには、ボタンに表示したいアイコンコンポーネント、ユーザーがボタンをクリックした時に呼び出される関数、およびボタンをアクティブにするかどうかが含まれる必要があります。 |
  </Tab>
</Tabs>

## ライトボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { LightButton } from "@/ui/input/button/components/LightButton";

    export const MyComponent = () => {
      return <LightButton
      className
      icon={null}
      title="タイトル"
      accent="secondary"
      active={false}
      disabled={false}
      focus={true}
      onClick={()=>console.log('クリック')}
      />;
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ     | タイプ               | 説明                                               |
    | --------- | ----------------- | ------------------------------------------------ |
    | className | string            | 追加のスタイリングのためのオプション名                              |
    | アイコン      | `React.ReactNode` | ボタンに表示したいアイコン                                    |
    | タイトル      | string            | ボタンのテキスト内容                                       |
    | accent    | string            | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
    | アクティブ     | ブール型              | ボタンがアクティブな状態にあるかどうかを決定します                        |
    | disabled  | ブール型              | ボタンが無効かどうかを決定します                                 |
    | focus     | ブール型              | ボタンにフォーカスがあるかどうかを示します                            |
    | onClick   | function          | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                |
  </Tab>
</Tabs>

## ライトアイコンボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <LightIconButton
          className
          testId="test1"
          Icon={IconSearch}
          title="タイトル"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("クリック")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ     | タイプ                   | 説明                                               |
    | --------- | --------------------- | ------------------------------------------------ |
    | className | string                | 追加のスタイリングのためのオプション名                              |
    | testId    | string                | ボタンのテスト識別子                                       |
    | アイコン      | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                      |
    | タイトル      | string                | ボタンのテキスト内容                                       |
    | サイズ       | string                | ボタンのサイズ。 オプションは2つ：`small` と `medium`             |
    | accent    | string                | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
    | アクティブ     | ブール型                  | ボタンがアクティブな状態にあるかどうかを決定します                        |
    | disabled  | ブール型                  | ボタンが無効かどうかを決定します                                 |
    | focus     | ブール型                  | ボタンにフォーカスがあるかどうかを示します                            |
    | onClick   | function              | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                |
  </Tab>
</Tabs>

## メインボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <MainButton
          title="チェックボックス"
          fullWidth={false}
          variant="primary"
          soon={false}
          Icon={IconCheckbox}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ                | タイプ                              | 説明                                                     |
    | -------------------- | -------------------------------- | ------------------------------------------------------ |
    | タイトル                 | string                           | ボタンのテキスト内容                                             |
    | fullWidth            | ブール型                             | ボタンがコンテナの全幅を占めるかどうかを定義します                              |
    | バリアント                | string                           | ボタンの視覚スタイルのバリアント。 オプションは `primary` と `secondary` を含みます |
    | 間もなく                 | ブール型                             | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。        |
    | アイコン                 | `React.ComponentType`            | ボタン内に表示されるオプションのアイコンコンポーネント                            |
    | React `button` props | `React.ComponentProps<'button'>` | 標準的なHTMLボタンのプロパティすべてがサポートされています                        |
  </Tab>
</Tabs>

## 丸型アイコンボタン

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <RoundedIconButton
          Icon={IconSearch}
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ                | タイプ                                             | 説明 |
    | -------------------- | ----------------------------------------------- | -- |
    | アイコン                 | `React.ComponentType`                           |    |
    | React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |    |
  </Tab>
</Tabs>