ボタン

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

使用方法
プロパティ

import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

プロパティ	タイプ	説明
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	ユーザーがボタンをクリックしたときにトリガーされるコールバック関数

ボタングループ

使用方法
プロパティ

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="Button 1"
        fullWidth={false}
        variant="primary"
        size="medium"
        position="standalone"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 2"
        fullWidth={false}
        variant="secondary"
        size="medium"
        position="left"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 3"
        fullWidth={false}
        variant="tertiary"
        size="medium"
        position="right"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
    </ButtonGroup>
  );
};

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

浮動ボタン

使用方法
プロパティ

import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

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

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

浮動ボタングループ

使用方法
プロパティ

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>
  );
};

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

浮動アイコンボタン

使用方法
プロパティ

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("click")}
      isActive={true}
    />
  );
};

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

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

使用方法
プロパティ

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("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

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

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

ライトボタン

使用方法
プロパティ

import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};

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

ライトアイコンボタン

使用方法
プロパティ

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="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

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

メインボタン

使用方法
プロパティ

import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};

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

丸型アイコンボタン

使用方法
プロパティ

import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

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

プロパティ	タイプ	説明
アイコン	`React.ComponentType`
React `button` props	`React.ButtonHTMLAttributes<HTMLButtonElement>`

Welcome

Core Concepts

ボタン

ボタン

ボタングループ

浮動ボタン

浮動ボタングループ

浮動アイコンボタン

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

ライトボタン

ライトアイコンボタン

メインボタン

丸型アイコンボタン

​ボタン

​ボタングループ

​浮動ボタン

​浮動ボタングループ

​浮動アイコンボタン

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

​ライトボタン

​ライトアイコンボタン

​メインボタン

​丸型アイコンボタン

ボタン

ボタングループ

浮動ボタン

浮動ボタングループ

浮動アイコンボタン

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

ライトボタン

ライトアイコンボタン

メインボタン

丸型アイコンボタン