ボタン行

フォーム ／ パターン集トップ

主操作は左（LTR）、キャンセルは控えめに。1画面1つの主ボタン

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<!-- 塗りは1画面に1つ。文言はその画面のものへ書き換える
     （問い合わせの入力画面なら「確認へ」、確認画面なら「送信する」） -->
<div class="button-row">
  <button class="button button--primary" type="submit">保存する</button>
  <button class="button button--secondary" type="button">キャンセル</button>
  <button class="button button--ghost" type="button">下書き</button>
</div>

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* .button の基底と派生は「出発点のCSS」にある */

確認する#

• 主ボタンは1つだけ目立つ
• 破壊的操作は右端に置いていない
• 375pxで折り返しても順序が保たれる
• 基底の .button を出発点のCSSから1回だけ貼っている
• 同じ画面のほかのフォームのパターンから、送信ボタンを持ち込んでいない

関連#

• ボタンとリンク
• 選択
• 視覚階層