バッジ

Badge

説明

数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。

淡い背景色で視認性を確保しつつ、主張しすぎないスタイル。情報分類に最適。

ベタ塗りの強調スタイル。通知数やステータス表示に適している。

枠線のみのシンプルスタイル。背景色に影響されにくい汎用的なバッジ。

ダーク系のバッジ。ダークモードUIや重要な情報のラベリングに。

角丸なしの直線的なスタイル。テーブルのステータス列などに適している。

カラードットをテキストの前に付けたスタイル。ステータスインジケーターとして使いやすい。

グラデーション背景のリッチなバッジ。ランク・プレミアム表示に映える。

グレー系の控えめなスタイル。補足情報やタグの表示に。

Button

ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。

Modal

メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。

Table

構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。

名前	ステータス
田中	有効
鈴木	無効

Tooltip

要素にホバーまたはフォーカスしたときに表示される補足情報。短いテキストで要素の説明や補足を行う。