ボタングループ Button Group
関連するボタンを横並びにグループ化した要素。セグメントコントロールとしても使用。
ライブデモ
ソースコード
<div class="demo-btngroup-list">
<div class="demo-btngroup" role="group" aria-label="表示切替">
<button class="demo-btngroup-btn active">日</button>
<button class="demo-btngroup-btn">週</button>
<button class="demo-btngroup-btn">月</button>
<button class="demo-btngroup-btn">年</button>
</div>
<div class="demo-btngroup outline" role="group" aria-label="ビュー切替">
<button class="demo-btngroup-btn active">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</button>
<button class="demo-btngroup-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
</button>
</div>
</div>.demo-btngroup-list { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.demo-btngroup {
display: inline-flex; border: 2px solid var(--ui-primary);
border-radius: 8px; overflow: hidden;
}
.demo-btngroup-btn {
padding: 8px 16px; border: none; background: transparent;
color: var(--ui-primary); font-size: 13px; font-weight: 600;
cursor: pointer; transition: background 0.2s, color 0.2s;
display: flex; align-items: center; gap: 4px;
}
.demo-btngroup-btn + .demo-btngroup-btn { border-left: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent); }
.demo-btngroup-btn:hover { background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.demo-btngroup-btn.active { background: var(--ui-primary); color: #fff; }document.querySelectorAll('.demo-btngroup').forEach(group => {
group.querySelectorAll('.demo-btngroup-btn').forEach(btn => {
btn.addEventListener('click', function() {
group.querySelectorAll('.demo-btngroup-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
});AIプロンプト
Basic
ボタングループをHTML/CSS/JSで作ってください。横並びのボタンで、1つだけ選択状態になります。
Custom
以下の仕様でボタングループを実装してください。 - セグメントコントロール型のデザイン - プライマリカラー: #2563eb - アクティブ状態のスライドアニメーション - アイコンのみモードとテキストモード - ボーダー結合（角丸は端のみ） - disabled状態対応
Advanced
アクセシビリティ対応のボタングループを実装してください。 - role="group" + aria-label でグループ化 - role="radiogroup" + role="radio" で排他的選択 - aria-pressed（トグルモード） - 矢印キーでグループ内を移動 - Tabキーはグループをスキップ（ロービングタブインデックス） - アクティブインジケーターのスライドアニメーション - レスポンシブ（モバイルではドロップダウンに変化） - 複数選択モード対応 - CSS :has() でネイティブ状態管理