1. メニュー・ナビゲーション
ハンバーガーメニュー hamburger
≡ 横三本線。左上が定番
ケバブメニュー kebab
縦の点3つ。行の右端など
ミートボールメニュー meatball
横の点3つ
タブ tab
横並びの表示切替
パンくずリスト breadcrumb
現在地の階層表示
アコーディオン accordion
詳細を開く
クリックで開閉する折りたたみ。
開閉する見出し＋本文
2. 入力・選択
チェックボックス checkbox
□ 複数選択可
ラジオボタン radio
○ 単一選択
トグル toggle/switch
ON/OFFのスイッチ
ドロップダウン select/プルダウン
▼で展開する選択リスト
スライダー slider
つまみを左右に動かす
ステッパー stepper
＋−で数値増減
テキストフィールド text field
1行の文字入力
テキストエリア textarea
複数行の文字入力
3. ボタン・操作
プライマリボタン primary
一番目立つ実行ボタン
セカンダリボタン secondary
控えめな副ボタン
アイコンボタン icon button
文字なし、絵だけ
FAB floating action button
右下に浮く丸い追加ボタン
チップ chip/tag
タグA × タグB ×
角丸の小ラベル（×で削除）
バッジ badge
🔔3
数字や点の通知マーク
4. オーバーレイ・通知
モーダル / ダイアログ modal
背景
本当に削除しますか？
前面に出て背景を覆う確認窓
ツールチップ tooltip
ホバーで出る説明の吹き出し（？に乗せる）
トースト / スナックバー toast
保存しました ✓
数秒で消える一時通知
バナー banner
上部に出る帯状の告知
スピナー spinner
くるくる回る読込中表示
プログレスバー progress bar
棒状の進捗
スケルトン skeleton
読込中の灰色プレースホルダ
5. レイアウト・表示
カード card
タイトル
枠で囲った情報のまとまり
枠で囲った情報のまとまり
情報を箱でまとめた単位
テーブル table/表
| 名前 | 金額 |
|---|---|
| A | 100 |
行列のデータ表示
ページネーション pagination
ページ送り
ウィザード wizard
「次へ」で進む複数ステップ誘導