Button ボタン · kf-btn
押せるもの。主ボタン(kf-btn-primary)は画面に 1 つだけ、それ以外は枠線の kf-btn。
HTML
<div class="kf-row">
<button class="kf-btn kf-btn-primary">保存する</button>
<button class="kf-btn">詳細を見る</button>
<button class="kf-btn kf-btn-quiet">あとで</button>
<button class="kf-btn kf-btn-danger">削除する</button>
<button class="kf-btn" disabled>保存済み</button>
</div>
<div class="kf-row">
<button class="kf-btn kf-btn-primary kf-btn-sm">承認</button>
<button class="kf-btn kf-btn-sm">開く</button>
<button class="kf-btn kf-btn-quiet kf-btn-sm">複製</button>
</div>- 文字は動詞で短く(「登録する」「送る」「取り消す」)。「OK」「はい」は使わない。
kf-btn-quietは表の行の中や繰り返す操作に。kf-btn-dangerは取り消し・削除・却下にだけ使い、押した先で確認を挟む。- 小さいサイズ
kf-btn-smは表のセルとカードの右上に。 - 色だけで主従を示さない。主ボタンは
primaryの塗り、他はsurfaceにline-strongの枠。 - フォーカス輪は
focusの 2px 実線。消さない。 - HTML で書くなら
<button class="kf-btn kf-btn-primary">。補助としてKafune.buttonHtml({variant, size, label})。