Popover
대상 가까이에 짧은 내용이나 간단한 입력을 띄워요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
링크 공유
링크가 있는 사람은 누구나 볼 수 있어요.
사용법
- 너비 320, 대상에서 8pxpadding space/4, 영역 사이 space/3.
- 다른 컴포넌트와 구분확인이 필요한 결정은 Dialog, 목록형 동작은 Menu를 써요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| PopoverTitle | body-strong | — |
| PopoverDescription | caption + text/muted | — |
| PopoverClose | 닫기 버튼 | — |
코드
tsx
<Popover>
<PopoverTrigger render={<Button variant="secondary" />}>공유</PopoverTrigger>
<PopoverPopup>
<PopoverTitle>링크로 공유</PopoverTitle>
<PopoverDescription>링크가 있는 사람은 누구나 볼 수 있어요.</PopoverDescription>
</PopoverPopup>
</Popover>