オーバーレイ

オーバーレイの概要

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

カテゴリ概要

コンポーネント一覧

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

確認ダイアログ

AlertDialog

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

詳細を見る

チャットパネル

ChatPanel

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

詳細を見る

コンテキストメニュー

ContextMenu

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

詳細を見る

ダイアログ

Dialog

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

詳細を見る

ドロワー

Drawer

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

詳細を見る

ドロップダウン

DropdownMenu

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

詳細を見る

フローティングパネル

FloatingPanel

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

詳細を見る

ホバーカード

HoverCard

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

詳細を見る

メディアライトボックス

MediaLightbox

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

詳細を見る

メディア選択ダイアログ

MediaPickerDialog

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

詳細を見る

モーダル

Modal

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

詳細を見る

オンボーディング

OnboardingFlow

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

詳細を見る

ポップオーバー

Popover

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

詳細を見る

共有モーダル

ShareModal

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

詳細を見る

シート

Sheet

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

詳細を見る

ツールチップ

Tooltip

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

詳細を見る

補足情報

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

このカテゴリの責務

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

このページの使い方

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

パターンで確認する場面

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

パターンを見る

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

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

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

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

迷いやすい使い分け

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

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

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

最初に確認するページ

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

ダイアログ

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

確認ダイアログ

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

ポップオーバー

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

避ける使い方

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

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

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

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

まとめて使う見本

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

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 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｜開示・オーバーレイ）(新しいタブで開きます)