Skip to main content
BlueAI
BlueAIBlueAI Design System
JAEN
Home/Components/Form & Input/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

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

ガイドライン

Do
  • ●主要アクションには Primary を使い、1 画面に 1 つまでにする
  • ●ラベルには動詞を使う（「保存する」「追加する」「送信する」）
Don't
  • ●複数の Primary ボタンを横に並べない
  • ●「OK」「はい」のような曖昧なラベルを使わない