Live Docs

Navigation

Feedback /

stable

Popover

Panel overlay ringan untuk konten tambahan, aksi cepat, atau informasi terstruktur kecil.

import { Popover } from "@naraya/ui";

Overview

Popover cocok untuk konten interaktif singkat. Jika butuh fokus penuh user dan blocking interaction, gunakan Dialog.

Examples

Uncontrolled

<Popover content={<div>Tips singkat</div>}>
  <Button>Open popover</Button>
</Popover>

Controlled

const [open, setOpen] = useState(false);
<Popover open={open} onOpenChange={setOpen} content={<div>...</div>}>
  <Button>Toggle controlled</Button>
</Popover>

Sides and align

<Popover side="top" content={<Text>Top</Text>}><Button>Top</Button></Popover>
<Popover side="bottom" align="start" content={<Text>Bottom start</Text>}><Button>Bottom</Button></Popover>
<Popover side="right" content={<Text>Right</Text>}><Button>Right</Button></Popover>

Props

PropTypeDefaultDescription
content*ReactNode—Isi panel popover.
side"top" | "bottom" | "left" | "right""bottom"Posisi panel.
align"center" | "start" | "end""center"Alignment panel relatif trigger.
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Callback controlled mode.
children*ReactElement—Trigger element tunggal.

Tokens Used

--bg-surface

Panel background

--border-subtle

Panel border

--shadow-lg

Overlay elevation

--radius-md

Rounded panel

Accessibility

  • Trigger menerima aria-expanded dan aria-controls saat panel terbuka.
  • Panel menutup saat klik di luar atau tekan Escape.
  • Untuk konten form kompleks/focus trap, gunakan Dialog agar pengalaman lebih aman.