部品 · Buttons
ボタン
共有Buttonのvariants、sizes、実装済み状態
- 利用範囲
- サイト全体の操作と導線
- 更新日
- 2026-07-10
プレビュー
状態と使い方
default
保存や登録など、画面の主な操作に使用します。
outline
白面とborderで補助操作を示す。
destructive
取り消せない操作へ限定する。
種類
サイズと状態
主な部品
この仕様に含まれるUI
2 件
Button
アクション
SectionMoreButton
アクション
解剖
主要アクション
共有Buttonのdefault variant。bg-primaryとprimary-foregroundを使う。
補助操作
secondary、outline、ghost、linkを用途に応じて使う。
サイズ
default、sm、lgと3種のicon sizeを共通仕様から選ぶ。
危険操作
削除や取り消し不能操作。赤面と確認ダイアログをセットにする。
状態
通常
default sizeはSP 44px、md以上40px。ラベルは1行を基本とする。
ホバー
defaultは同じ青色系のshared primary hoverトークンへ切り替え、白文字のコントラストを維持する。ブランドCTAは別のst-accent hoverを使う。
押下
共有Button自体にscale指定はなく、必要な画面だけclassNameで追加する。
フォーカス
focus-visibleで3px ringとborderを表示する。
無効
pointer-events-noneとopacity 50%を共通適用する。
読込中
専用propはなく、disabled、spinner、labelを呼び出し側で合成する。
仕様値
- 高さ
- default 44→40 / sm 36 / lg 48→44px
- 角丸
- rounded-md
- 文字
- 14px / 500 / nowrap
- 間隔
- icon + text gap 8px
- 通常色
- sharedPrimary #2563EB
- ホバー色
- sharedPrimaryHover #134FD2
- composition
- asChildでLink等へ意味を委譲
- focus
- ring 3px、aria-invalid対応
運用ルール
共通仕様を先に使う
新規ボタンはButtonのvariantとsizeで表現し、画面専用classは必要差分だけ追加する。
未実装状態を装わない
loadingやpressedは組み込みAPIではないため、資料でも自動提供されるように記載しない。
リンクとボタンを混ぜない
遷移はリンク、処理実行はボタンにし、見た目だけで代用しない。