「ボタン（Button）」を実装してください。
## これは何か
押すとその場で処理が走る部品。保存・送信・削除など、ページを移動しない動作に使う。
## 使いどころ
- 入力を確定する、削除する、追加するなど、その場で実行したいとき
- 主要な操作を1つだけ塗りつぶし（プライマリ）にし、それ以外は枠線だけ（セカンダリ）にして優先順位を示すとき
## 実装の要件
- button 要素。form の中では type="submit" か type="button" を明示する
- プライマリ（塗り）とセカンダリ（枠線）の2種類を用意する
- 1つの画面にプライマリボタンを何個も置かない。どれが主役か分からなくなる
- 移動するだけのものをボタンにしない。右クリックで新しいタブに開けなくなる
- ラベルの文字数に幅を任せない。最小幅と左右の余白を決めないと、短いラベルのボタンが押しづらくなる
## アクセシビリティの要件
- button 要素を使い、type を必ず書く。form の中で type を省くと submit として動く
- 文字と背景のコントラストを 4.5:1 以上にする
- 押せる領域を 24×24px 以上にする（WCAG 2.2 の AA）。指で押す画面では 44×44px を目安にする
- 処理中に disabled にするだけで終わらせず、何が起きているかを文言でも伝える
## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。
```html
<div class="x-button">
<button class="x-button__b x-button__b--primary" type="button">保存する</button>
<button class="x-button__b" type="button">キャンセル</button>
</div>
```
```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-button,
.x-button *:not([class*="fa-"]),
.x-button *:not([class*="fa-"])::before,
.x-button *:not([class*="fa-"])::after {
box-sizing: border-box;
/* 貼った先の既定の書体に引きずられないようにする。書体が変わると
文字の幅と高さが変わり、枠のサイズまでずれる */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}
.x-button {
display: flex;
gap: 8px;
}
.x-button__b {
min-width: 96px;
min-height: 44px;
padding: 0 18px;
border: 1px solid #cfd4dc;
border-radius: 8px;
background: #fff;
color: #1b2028;
font: inherit;
font-size: 14px;
cursor: pointer;
}
.x-button__b:hover {
border-color: #1d4ed8;
color: #1d4ed8;
}
.x-button__b--primary {
border-color: #1d4ed8;
background: #1d4ed8;
color: #fff;
}
.x-button__b--primary:hover {
background: #1b45bd;
border-color: #1b45bd;
color: #fff;
}
.x-button__b:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
```
## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。