Components

Avatar

アバターはユーザーやエンティティを視覚的に表現するためのコンポーネントです。

Badge

バッジは特定の要素に対して通知の数やタスクの数などの数値情報を付与するために使用するコンポーネントです。

Breadcrumb

パンくずはユーザーが現在のページ階層を理解し、親の階層へ戻るためのナビゲーションとして機能するコンポーネントです。

Button

ボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。

Calendar

カレンダーはポップアップウィンドウでユーザーに日付を選択してもらうために使用するコンポーネントです。

Card

カードはコンテンツをグルーピングして表示するために使用するコンポーネントです。遷移トリガーやドラッグ&ドロップなど、インタラクションを想定する場合は、Clickable Cardコンポーネントを使用します。

Checkbox

チェックボックスは複数のオプショングループから複数の項目を選択する形式でユーザーからの入力を取得するために使用するコンポーネントです。

Dialog

ダイアログはユーザーにアクションの実行や中断を確認するために使用するコンポーネントです。

Divider

ディバイダーコンポーネントはグループ内のコンテンツを視覚的に区切ってユーザーに提示する際に使用します。

Drawer

ドロワーは同一ウィンドウ内で補助的な情報や操作を一時的に提供するコンポーネントです。

Filter Chip

フィルターチップはタグや単語を用いてコンテンツをフィルタリングするために使用するコンポーネントです。

Form

フォームはフォームの入力要素・ラベル・ヘルパーテキストを包括して提供するために使用するコンポーネントです。

Icon

アイコンはテキスト情報を視覚表現でユーザーに提示するために使用するコンポーネントです。

Icon Button

アイコンボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。

Information List

インフォメーションリストは関連する情報を一覧の形式で並べるために使用するコンポーネントです。

Inline Message

インラインメッセージはユーザーにシステムやサービスの状態を伝えるために使用するコンポーネントです。

Input

インプットはテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。

Input Chip

インプットチップはチップ形式で任意の定数を選択して入力するためのコンポーネントです。

Input Date

インプットデイトはユーザーが日付を入力するために使用するコンポーネントです。

Input File

インプットファイルはユーザーがファイルをアップロードために使用するコンポーネントです。

Input Number

インプットナンバーは増減する数値の形式でユーザーからの入力を取得するために使用するコンポーネントです。

Input Password

インプットパスワードはパスワードの情報をユーザーから取得するために使用するコンポーネントです。

Input Search

インプットサーチは検索条件を入力するために使用するコンポーネントです。

Input Time

インプットタイムはユーザーが時間を入力するために使用するコンポーネントです。

Link

リンクはコンテンツがナビゲーションできることをユーザーに提示するために使用するコンポーネントです。

Menu

メニューはドロップダウンの形式でユーザーが特定のオプションを選択するために使用するコンポーネントです。

Modal

モーダルはコンテンツに重ねられたウィンドウを介して、ユーザーの注意を特定の情報に集中させるために使用するコンポーネントです。

Pagination

ページネーションはページの切り替えるためのナビゲーションを提供するために使用するコンポーネントです。

Popover

ポップオーバーはトリガーからウィンドウパネルを展開するために使用するコンポーネントです。

Progress Indicator

プログレスインジケーターは任意の処理の進行状況を視覚的に提示するために使用するコンポーネントです。

Radio

ラジオボタンは単一選択の形式でユーザーからの入力を取得するために使用するコンポーネントです。

Segmented Control

セグメントコントロールは同じカテゴリの中から1つのオプションを選択するために使用するコンポーネントです。

Select

セレクトはオプショングループの中から値を選択する形式でユーザーからの入力を取得するために使用するコンポーネントです。

Side Navigation

サイドナビゲーションはページのナビゲーションを配置するために使用するコンポーネントです。

Skeleton

スケルトンはユーザーにコンテンツが読込中であることを提示するために使用するコンポーネントです。

Slider

スライダーは任意の範囲の中からユーザーに特定の数値を選択してもらうために使用するコンポーネントです。

Stepper

ステッパーは、複数のステップを順番に進むプロセスを視覚的に表現するためのコンポーネントです。

Switch

スイッチは設定のオンとオフを切り替えるために使用するコンポーネントです。

Table

テーブルはデータを2軸で表示してユーザーに提示するために使用するコンポーネントです。

Tabs

タブはユーザーが扱う情報をシンプルに保つためのディスクロージャーとして使用するコンポーネントです。

Tag

タグは特定の要素にラベリングをすることで情報を分類・整理したり、情報にステータスを付与するために使用するコンポーネントです。

Textarea

テキストエリアは複数行のテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。

Toast

トーストはアクションの発生時にユーザーへフィードバックを行うために使用するコンポーネントです。

Tooltip

ツールチップはスペースが限られた場所で情報を一時的に補足するために使用するコンポーネントです。

Vertical Tabs

バーティカルタブはユーザーが扱う情報をシンプルに保つためのディスクロージャーとして使用するコンポーネントです。