ボタン (Buttons)

デザインシステムで定義されたボタンスタイルです。一貫性があり、アクセシブルなボタンを提供します。

ボタンの種類

Code:

<button class=“btn btn-primary btn-md”>プライマリー</button>
<button class=“btn btn-secondary btn-md”>セカンダリー</button>
<button class=“btn btn-danger btn-md”>危険</button>

サイズ

Code:

<button class=“btn btn-primary btn-sm”>小</button>
<button class=“btn btn-primary btn-md”>中</button>
<button class=“btn btn-primary btn-lg”>大</button>

状態

Code:

<button class=“btn btn-primary btn-md”>通常</button>
<button class=“btn btn-primary btn-md” disabled>無効</button>

アクセシビリティ

  • • キーボードフォーカスが明確に表示されます（Tabキーで確認）
  • • 無効状態では操作できません
  • • 十分なコントラスト比を確保しています
  • • スクリーンリーダーに対応しています