ボタン

Button

説明

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

影なし・ベタ塗りのシンプルなスタイル。クリーンなUIに最適。

ドロップシャドウで浮いた質感を表現。CTAボタンに適している。

枠線のみのゴースト系スタイル。セカンダリアクションに最適。

鮮やかなグラデーション背景。視覚的インパクトが高いCTAに。

淡い背景色で柔らかい印象。情報提示系のアクションに。

ダーク系のソリッドなスタイル。ダークモードUIや重要なアクションに。

すりガラスのような半透明エフェクト。グラデーション背景に重ねて使う洗練されたスタイル。

背景と同色の素材から浮き出るような立体感。押すとへこむインタラクション付き。

周囲に光が広がる発光エフェクト。ダーク系UIのCTAやゲーム系UIに映える。

押すと実際に沈み込む立体ボタン。box-shadowで厚みを表現したフィジカルな触感。

ドット絵・レトロゲームを彷彿とさせるピクセルアートスタイル。ゲーム系・懐古系UIに。

Googleのマテリアルデザイン準拠。エレベーション（高さ）で階層を表現する。

Modal

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

Table

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

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

Badge

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

Tooltip

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