ホーム/コンポーネント/フォームと入力/ボタン Button

FormButton

アクションを実行するためのボタンコンポーネント。variant / size / icon / shortcut / disabled をサポート。

import { FormButton } from "@blueai/ui"

Examples

Variants

<FormButton variant="primary">Primary</FormButton>
<FormButton variant="secondary">Secondary</FormButton>
<FormButton variant="danger">Danger</FormButton>
<FormButton variant="ghost">Ghost</FormButton>
<FormButton variant="link">Link</FormButton>
<FormButton variant="outline">Outline</FormButton>

Sizes

<FormButton size="xs">XS</FormButton>
<FormButton size="sm">Small</FormButton>
<FormButton size="md">Medium</FormButton>
<FormButton size="lg">Large</FormButton>

With Icon

import { PlusIcon, MagnifyingGlassIcon } from "@blueai/icons/duotone";

<FormButton variant="primary" size="sm" icon={<PlusIcon size={14} />}>
  追加
</FormButton>
<FormButton variant="secondary" size="sm" icon={<MagnifyingGlassIcon size={14} />}>
  検索
</FormButton>

With Shortcut

<FormButton
  variant="primary"
  size="sm"
  shortcut={{ mac: "⌘ ⏎", win: "Ctrl ⏎" }}
>
  保存
</FormButton>

Disabled

<FormButton variant="primary" disabled>
  Disabled Primary
</FormButton>

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "danger" \| "ghost" \| "link" \| "outline" \| "slack"	"primary"	ボタンのスタイル
size	"xs" \| "sm" \| "md" \| "lg"	"md"	ボタンのサイズ
icon	ReactNode	—	ボタン内に表示するアイコン
shortcut	{ mac: string; win: string }	—	キーボードショートカットラベル
fullWidth	boolean	false	幅を100%にする
disabled	boolean	false	無効状態
type	"button" \| "submit" \| "reset"	"button"	HTML button type
onClick	() => void	—	クリックハンドラ
children*	ReactNode	—	ボタンのラベル

ガイドライン

●主要アクションには Primary を使い、1 画面に 1 つまでにする
●ラベルには動詞を使う（「保存する」「追加する」「送信する」）

Don't

●複数の Primary ボタンを横に並べない
●「OK」「はい」のような曖昧なラベルを使わない