전체 카탈로그
OverlayPopover16 props

Popover

A click-triggered overlay anchored to a button or trigger element. Use it for secondary actions, inline confirmations, or supplementary information that does not warrant a full ...

공식 문서 열기
live previewOverlay

Preview

Import

import {Popover} from '@astryxdesign/core/Popover';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

A click-triggered overlay anchored to a button or trigger element. Use it for secondary actions, inline confirmations, or supplementary information that does not warrant a full ...

popoverpopupdropdowntooltipoverlayflyoutcalloutpopper

Important props

placementabove | below | start | endoptional
alignmentstart | center | endoptional
widthnumber | stringoptional

Theming targets

astryx-popover

Best practices

  • DoKeep popover content focused on a single task or piece of information.
  • DoProvide a clear way to close: either by clicking outside or with an explicit close button.
  • Do notNest popovers inside other popovers; it creates confusing focus and navigation.
  • Do notUse a popover for content that requires heavy user input; use a Dialog instead.