Design SystemComponentsPopover

Popover

Installation

import { Popover } from "@olab/components";

Overview

點擊觸發元素後，在旁邊浮出的一塊面板，可以放任何內容，包括按鈕和表單。底色、細邊框、20px 圓角跟 Card 是同一套外觀。

它只在點擊時開關，滑過不會開，可以選擇右上角加一個關閉鈕。只要一句說明、不需要互動時，請改用 Tooltip。

Interactive Demo

CLICK THE BUTTON — popover opens beside the trigger

State Matrix

OPEN STATE — static replica (same classes, rendered in place)

Default panel
closeable = false
Closeable panel
closeable = true
Close button hover
close · hover (sim)
Hi
short content · min-w-40

Examples

RICH CONTENT — any ReactNode fits inside

Spec

PartValueSource class
Backgroundsurfacebg-primary
Border1pxborder border-secondary
Text14px（bodyM）text-bodyM text-primary
Radius20pxrounded-2xl
Padding12px（四邊）p-3
Min width160px；寬度跟著內容長min-w-40
Close button右上各 12px，內距 4px，圓角 4pxabsolute top-3 right-3 p-1 rounded
Close button · hover淡底hover:bg-secondary

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/popover.md。

Usage

Do

  • 需要在原地多看一點、或做一個小操作時用：補充說明加一顆確認鈕、快速篩選。
  • 內容有按鈕或連結時開 closeable，讓人知道怎麼關。
  • 觸發元素用真的 Button 或連結；Popover 會直接套在它上面，不另外加外觀。

Don't

  • 不要拿來放一句提示文字；那是 Tooltip 的工作，而且 Popover 滑過不會開。
  • 不要放長流程或整張表單；需要專心完成的事請用 Modal。
  • 不要用 className 改圓角、內距或邊框；浮層外觀應該跟 Modal、Toast 保持同一套。