Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { PreviewCard } from '@bigbang/ui';- Source
- PreviewCard.tsx
- Storybook
- PreviewCard · Playground
PreviewCard is in the @bigbang/ui package.
import { PreviewCard } from '@bigbang/ui';
<PreviewCard href="/help/refunds" preview={<RefundSummary />}> refund policy</PreviewCard>;hrefRequired- Description
- Where the link goes. Unsafe schemes such as
javascript:are dropped, as in Link. - Type
string
childrenRequired- Description
- The link text. It must make sense on its own: the preview is extra and not reachable by keyboard.
- Type
ReactNode
previewRequired- Description
- The preview shown on hover or focus: a short summary of the destination. Do not put actions in it.
- Type
ReactNode
side- Description
- Side of the link the card opens on; it flips when there is no room.
- Type
PopoverSide- Default
'bottom'
align- Description
- Alignment along that side.
- Type
'center' | 'start' | 'end'- Default
'center'
size- Description
- Card width, from the popover width tokens.
- Type
'sm' | 'md' | 'lg'- Default
'sm'
delay- Description
- Milliseconds to wait before opening.
- Type
number- Default
600
closeDelay- Description
- Milliseconds to wait before closing once the pointer leaves.
- Type
number- Default
300
open- Description
- Controlled open state. Pass it with
onOpenChange. - Type
boolean
defaultOpen- Description
- Initial open state when uncontrolled.
- Type
boolean- Default
false
onOpenChange- Description
- Called when the card opens or closes.
- Type
(open: boolean) => void
className- Description
- For layout only: margins and alignment. Do not use it to change the colour.
- Type
string
Data attributes
Section titled “Data attributes”data-component="preview-card": on the link.data-part="popup"anddata-size: on the card.data-popup-open,data-side,data-starting-style,data-ending-style: from Base UI.