FormButton
アクションを実行するためのボタンコンポーネント。variant / size / icon / shortcut / disabled をサポート。
import { FormButton } from "@blueai/ui"Examples
Variants
Sizes
With Icon
With Shortcut
Disabled
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 | — | ボタンのラベル |
ガイドライン
Do
- ●主要アクションには Primary を使い、1 画面に 1 つまでにする
- ●ラベルには動詞を使う（「保存する」「追加する」「送信する」）
Don't
- ●複数の Primary ボタンを横に並べない
- ●「OK」「はい」のような曖昧なラベルを使わない