表示
ボタン
Button
ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
UIコンポーネント一覧
ボタン、入力、通知、ナビゲーションなど、UIを構成する部品を検索意図に近い形で整理しています。
52件 / 52件を表示。気になるUIは詳細でスタイル別コードを確認できます。
入力
テキスト入力
Input
テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。
表示
モーダル
Modal
モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。
フィードバック
トースト
Toast
トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
表示
テーブル
Table
テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。
ナビゲーション
ナビゲーション
Navigation
ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
ナビゲーション
パンくずリスト
Breadcrumb
パンくずリスト（Breadcrumb）は、ユーザーの現在位置をページ階層で示すナビゲーション補助コンポーネント。サイトの深い階層を分かりやすく示す。
表示
バッジ
Badge
バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
表示
ツールチップ
Tooltip
ツールチップ（Tooltip）は、要素にホバーまたはフォーカスしたときに表示される補足情報。短いテキストで要素の説明や補足を行う。
表示
アコーディオン
Accordion
アコーディオン（Accordion）は、ヘッダーをクリックすることでコンテンツを展開・折りたたみできるコンポーネント。FAQやコンテンツのグループ表示に使用される。
入力
選択ボックス
Select
選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。
入力
チェックボックス
Checkbox
チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。
フィードバック
スピナー
Spinner
スピナー（Spinner）は、非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。
ナビゲーション
ページネーション
Pagination
ページネーション（Pagination）は、複数ページに渡るコンテンツを区切り、ページ間を移動するためのナビゲーション。ページ数・現在位置・前後移動ボタンで構成される。
入力
ラジオボタン
Radio Button
ラジオボタン（Radio Button）は、複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。
入力
日付選択
Date Picker
日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。
入力
スライダー
Slider
スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。
入力
トグルスイッチ
Switch
トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。
入力
ファイルアップロード
File Upload
ファイルアップロード（File Upload）は、ファイルを選択またはドラッグ＆ドロップでアップロードするコンポーネント。ファイル種別・サイズ制限の表示やプレビュー機能を持つ場合もある。
表示
カード
Card
カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
表示
タブ
Tab
タブ（Tab）は、複数のコンテンツパネルをタブで切り替えて表示するコンポーネント。同一画面内で関連するコンテンツを整理する。
表示
アバター
Avatar
アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。
表示
タグ
Tag
タグ（Tag）は、コンテンツの分類・属性を示すラベルコンポーネント。削除可能・クリック可能なバリアントを持つ場合もある。バッジより情報量が多く、一覧での絞り込みにも使われる。
表示
プログレスバー
Progress Bar
プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。
フィードバック
アラート
Alert
アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。
フィードバック
スケルトン
Skeleton
スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。
ナビゲーション
タブナビゲーション
Tab Navigation
タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。
ナビゲーション
サイドバー
Sidebar
サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。
レイアウト
区切り線
Divider
区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。
レイアウト
グリッド
Grid
グリッド（Grid）は、コンテンツを列ベースのグリッドで整列させるレイアウトコンポーネント。レスポンシブ対応のカラム数指定が可能。
レイアウト
スペーサー
Spacer
スペーサー（Spacer）は、要素間の余白を明示的に制御するレイアウト補助コンポーネント。デザイントークンで定義されたスペーシングスケールに従う。
特殊
縦書きテキスト
Vertical Text
縦書きテキスト（Vertical Text）は、日本語の縦書きレイアウトに対応したテキスト表示コンポーネント。出版・新聞・伝統的なデザインUIで使用される。
特殊
ルビ（ふりがな）
Ruby
ルビ（ふりがな）（Ruby）は、漢字などの文字の上または横にふりがな（読み仮名）を付けるコンポーネント。教育系・行政系サービスでのアクセシビリティ向上に使われる。
特殊
氏名入力
Name Input
氏名入力（Name Input）は、姓・名・姓（フリガナ）・名（フリガナ）を分割して入力する複合コンポーネント。日本の氏名入力フォームの標準的な実装パターン。
行政・公共
和暦入力
Japanese Calendar
和暦入力（Japanese Calendar）は、令和・平成・昭和などの和暦（元号）と西暦を相互変換しながら日付を入力・表示するコンポーネント。行政・公共サービスで必須の機能。
行政・公共
住所入力
Address Input
住所入力（Address Input）は、郵便番号入力による住所自動補完と、都道府県・市区町村・番地・建物名を分割入力する複合フォームコンポーネント。
行政・公共
マイナンバー入力
My Number Input
マイナンバー入力（My Number Input）は、12桁のマイナンバー（個人番号）をマスク表示しながら入力するコンポーネント。セキュリティ要件に対応したペースト制御・入力値の非表示機能を持つ。
入力
テキストエリア
Textarea
テキストエリア（Textarea）は、複数行のテキストを入力するフォームフィールド。自動リサイズ・最大行数制限・文字数カウンターのバリアントを持つ。
表示
ポップオーバー
Popover
ポップオーバー（Popover）は、要素に紐付いてトリガー操作で表示される吹き出し型UIコンポーネント。ツールチップより情報量が多く、ボタンやフォームを内包できる。
ナビゲーション
ドロワー
Drawer
ドロワー（Drawer）は、画面端からスライドインするパネル型コンポーネント。モバイルメニュー・フィルターパネル・詳細ビューに使用される。
フィードバック
空の状態
Empty State
空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。
ナビゲーション
ステッパー
Stepper
ステッパー（Stepper）は、複数ステップの手順や進捗を視覚的に示すナビゲーションコンポーネント。申請フォームのウィザードUI・購入フローなどで使われる。
入力
数値入力
Number Input
数値入力（Number Input）は、数値の入力に特化したコンポーネント。インクリメント・デクリメントボタン付きで、最小値・最大値・ステップ値の制御が可能。
表示
タイムライン
Timeline
タイムライン（Timeline）は、時系列に並んだイベントや更新履歴を縦・横に表示するコンポーネント。承認フロー・活動ログ・チャット履歴などに使われる。
表示
カルーセル
Carousel
カルーセル（Carousel）は、複数の画像やカードを横スクロールまたは自動再生で切り替えて表示するコンポーネント。ドット・矢印などのナビゲーターを持つ。
表示
ツリービュー
Tree View
ツリービュー（Tree View）は、フォルダ・カテゴリ・組織図など階層構造のデータをツリー形式で表示するコンポーネント。ノードの展開・折りたたみが可能。
ナビゲーション
ボトムシート
Bottom Sheet
ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。
表示
コンテキストメニュー
Context Menu
コンテキストメニュー（Context Menu）は、右クリックや長押し操作で表示されるショートカットメニューコンポーネント。選択中の要素に対する操作一覧を提供する。
入力
評価（レーティング）
Rating
評価（レーティング）（Rating）は、星や数値でユーザーの評価を入力・表示するコンポーネント。読み取り専用・インタラクティブのバリアントがある。
特殊
電話番号入力
Phone Number Input
電話番号入力（Phone Number Input）は、日本の電話番号形式（市外局番・市内局番・加入者番号）に対応した複合入力コンポーネント。ハイフン自動挿入・携帯/固定電話の形式切り替えに対応する。
行政・公共
口座番号入力
Bank Account Input
口座番号入力（Bank Account Input）は、金融機関コード・支店コード・口座種別・口座番号を分割入力する複合フォームコンポーネント。給与振込先や公金受取口座登録などに使われる。
入力
OTP入力
OTP Input
OTP入力（OTP Input）は、SMS認証やメール認証で使用する数桁のワンタイムパスワードを入力するコンポーネント。1桁ずつのセルに分かれ、入力時に自動フォーカス移動する。