03 · Components · 도움
팝오버Popover
트리거 버튼 옆에 임시로 나타나는 비모달 레이어. 도움말·필터 상세·추가 메뉴 등 모달보다 가벼운 상호작용에 사용합니다.
StableWCAG AA
기본
tsx
<Popover trigger={<Button variant="secondary">정렬</Button>}>
<p>최신순 · 인기순 · 조회순</p>
</Popover>미리보기
트리거에는 aria-expanded와 aria-haspopup="dialog"가 부여됩니다. ESC와 바깥쪽 클릭으로 닫히며 포커스는 트리거로 되돌아 가야 합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | 열기 버튼의 내용. | |
children | ReactNode | 팝오버 내부에 렌더될 콘텐츠. | |
placement | "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-start" | 트리거 기준 노출 위치. |