オーバーレイ

オーバーレイの概要

現在の画面の上に、一時的な情報、操作、確認、選択肢を重ねるコンポーネント群です。閉じ方、背景との関係、操作の重要度で使い分けます。

カテゴリ概要

コンポーネント一覧

各コンポーネントの詳細ページへ移動して、プレビュー、コード、プロパティを確認できます。

確認ダイアログ

AlertDialog

削除や破棄など、重要な操作の前に明示的な確認を求めるモーダルダイアログです。

詳細を見る

チャットパネル

ChatPanel

チャットメッセージとチャット入力を組み合わせ、サポートやアシスタントの会話面を構成するパネルです。

詳細を見る

コンテキストメニュー

ContextMenu

右クリックで開くメニューです。

詳細を見る

ダイアログ

Dialog

背後を無効化したオーバーレイのウィンドウです。

詳細を見る

ドロワー

Drawer

画面の端から補助的な内容を開き、設定や詳細をその場で確認できるドロワーです。

詳細を見る

ドロップダウン

DropdownMenu

ボタンで開くメニュー（アクションや機能の一覧）を表示します。

詳細を見る

フローティングパネル

FloatingPanel

作業面やキャンバス上に、ツール、状態、補助情報を重ねて表示するパネルです。必要に応じてドラッグやリサイズも有効化できます。

詳細を見る

ホバーカード

HoverCard

リンク先の内容をプレビュー表示するカードです。

詳細を見る

メディアライトボックス

MediaLightbox

メディアを大きく確認するための、ズーム・前後移動・操作付きライトボックスです。

詳細を見る

メディア選択ダイアログ

MediaPickerDialog

ライブラリ内のアセットを検索し、単体または複数選択するためのダイアログです。

詳細を見る

モーダル

Modal

現在の画面に重ねて、確認・入力・重要な補足を短い操作面として表示します。

詳細を見る

オンボーディング

OnboardingFlow

初期設定や導入手順を複数ステップに分けて案内するフローです。

詳細を見る

地点の詳細

PlacePanel

地図で選んだ1か所の詳細を出す欄です（スマートフォンでは画面の下、広い画面では地図の横に置きます）。値が届くまで、値の場所には読み込み中の仮の枠（骨組み）を出します。

詳細を見る

ポップオーバー

Popover

トリガーに紐づく補足情報、軽いフォーム、状態、短い確認を画面遷移なしで表示します。

詳細を見る

長い処理の待機画面

ProgressDialog

数十秒以上かかる処理を待つあいだのダイアログです。16:9 の絵、いまの状態を伝える一文、自由に中身を入れられる補助の枠（任意）、キャンセルのボタン（任意）を持ちます。利用者の操作では閉じず、閉じるのは呼び出し側のコードです。

詳細を見る

共有モーダル

ShareModal

公開リンクの有効化、URLコピー、共有状態の確認をまとめて扱うモーダルです。

詳細を見る

シート

Sheet

現在の画面を残したまま、補助的な設定・フォーム・ナビゲーションを画面端から表示する Dialog ベースのパネルです。

詳細を見る

ツールチップ

Tooltip

ホバーやフォーカス時に、操作名・補足・無効理由などの短い情報を表示します。

詳細を見る

補足情報

一覧でコンポーネントを選んだあとに確認する、カテゴリ全体の責務、共通ルール、使い分けです。

このカテゴリの責務

現在の画面を離れずに、一時的な選択、補足、確認、編集を行うための表示面を提供します。

このページの使い方

まずカテゴリの責務を確認し、迷いやすい使い分けから該当コンポーネントへ移動します。

パターンで確認する場面

実画面に近いフレームの中で、モーダル、シート、メニュー、ツールチップがページ全体へ漏れずに動くか確認します。

パターンを見る

オーバーレイ系の共通ルール

カテゴリ内で共通して守るべき判断基準です。

docs プレビューではページ全体ではなく、プレビュー内の文脈に収まる表示を優先します。

見切れは高さ追加で隠さず、配置、ポータル、collision、overflow の責務を確認します。

迷いやすい使い分け

似ているコンポーネントを選ぶ時の入口です。

確認や破壊的操作は AlertDialog、フォームや詳細編集は Dialog/Modal、補助パネルは Sheet/Drawer を使います。

軽い補足は Tooltip/HoverCard、短い設定や選択は Popover/DropdownMenu/ContextMenu を使います。

最初に確認するページ

重ねる情報の重さ、閉じ方、入力を伴うかどうかで選び始めます。

ダイアログ

短いフォーム、設定、詳細確認を現在画面の上で扱います。

確認ダイアログ

破壊的操作や戻せない操作の前に確認を求めます。

ポップオーバー

軽い設定、選択、補足情報をトリガーの近くに置きます。

避ける使い方

オーバーレイは表示位置と閉じ方が UX の大半を決めます。見切れやページ全体への漏れを放置しません。

見切れをプレビュー高さの追加だけで隠す。

モーダルやシートを docs プレビュー外のページ全体へ漏らす。

アイコンだけの閉じる、コピー、共有などにツールチップを付けない。

まとめて使う見本

この分類のコンポーネントをまとめて、1本の操作列からすべてを重ねて開く1画面を組んだ例です。そのまま貼り付けて動きます。

"use client";

import { useState } from "react";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button,
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuTrigger,
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
    Input,
    Popover,
    PopoverContent,
    PopoverTrigger,
    Sheet,
    SheetBody,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "@gunjo/ui";

const EXPORT_FORMATS = ["CSV", "JSON", "印刷用のPDF"];

const FIELDS = [
    { id: "owner", label: "担当", value: "ブランド制作" },
    { id: "due", label: "期日", value: "2026-06-12" },
];

export function AssetActionsBar() {
    const [title, setTitle] = useState("春キャンペーン");

    return (
        <TooltipProvider>
            <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card border-transparent contrast-more:border-border forced-colors:border-[CanvasText] p-3">
                <ContextMenu>
                    <ContextMenuTrigger asChild>
                        <span className="mr-auto text-sm font-medium">{title}</span>
                    </ContextMenuTrigger>
                    <ContextMenuContent>
                        <ContextMenuItem>複製する</ContextMenuItem>
                        <ContextMenuItem>お気に入りに入れる</ContextMenuItem>
                    </ContextMenuContent>
                </ContextMenu>

                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="sm">
                            共有
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>リンクを知っている人は見られます</TooltipContent>
                </Tooltip>

                <Popover>
                    <PopoverTrigger asChild>
                        <Button variant="ghost" size="sm">
                            詳細
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-64 space-y-2">
                        {FIELDS.map((field) => (
                            <div key={field.id} className="flex justify-between text-sm">
                                <span className="text-muted-foreground">{field.label}</span>
                                <span>{field.value}</span>
                            </div>
                        ))}
                    </PopoverContent>
                </Popover>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                            書き出し
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuLabel>この形式で保存</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        {EXPORT_FORMATS.map((format) => (
                            <DropdownMenuItem key={format}>{format}</DropdownMenuItem>
                        ))}
                    </DropdownMenuContent>
                </DropdownMenu>

                <Sheet>
                    <SheetTrigger asChild>
                        <Button variant="ghost" size="sm">
                            履歴
                        </Button>
                    </SheetTrigger>
                    <SheetContent side="right">
                        <SheetHeader>
                            <SheetTitle>変更の記録</SheetTitle>
                            <SheetDescription>
                                このコレクションへの変更を、新しい順に並べます。
                            </SheetDescription>
                        </SheetHeader>
                        <SheetBody className="space-y-3 text-sm text-muted-foreground">
                            <p>14:40 メインビジュアルを承認</p>
                            <p>11:05 法務からの指摘</p>
                            <p>09:20 下書きを提出</p>
                        </SheetBody>
                    </SheetContent>
                </Sheet>

                <Dialog>
                    <DialogTrigger asChild>
                        <Button variant="outline" size="sm">
                            名前を変える
                        </Button>
                    </DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>コレクションの名前を変える</DialogTitle>
                            <DialogDescription>
                                この名前は、閲覧できる全員に見えます。
                            </DialogDescription>
                        </DialogHeader>
                        <DialogBody>
                            <Input
                                label="コレクション名"
                                value={title}
                                onChange={(event) => setTitle(event.target.value)}
                            />
                        </DialogBody>
                        <DialogFooter>
                            <Button>保存</Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>

                <AlertDialog>
                    <AlertDialogTrigger asChild>
                        <Button variant="destructive" size="sm">
                            削除
                        </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>このコレクションを削除しますか</AlertDialogTitle>
                            <AlertDialogDescription>
                                素材24点が消えます。取り消せません。
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>やめる</AlertDialogCancel>
                            <AlertDialogAction>削除する</AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
        </TooltipProvider>
    );
}

設計の判断

重ねて表示するコンポーネントをいつ使い、いつ使わないかは、UIXHERO の「UIコンポーネント完全ガイド」にある「カテゴリ 06｜開示・オーバーレイ」の節にまとめています。今の画面を保ったまま情報を足すのか、作業を止めて確認させるのかで、選ぶコンポーネントが変わります。

UIXHERO: UIコンポーネント完全ガイド（カテゴリ 06｜開示・オーバーレイ）(新しいタブで開きます)