opinion
Lightbox
A thumbnail that opens a full-screen preview, with optional action buttons.
Van livery photosLast action: none yet
In context
File galleryvan-livery-photos.zip, 48 MB
Harbour rebrandVan livery photos
Props
| Prop | Type | Required | Default |
|---|---|---|---|
src | string | Yes | — |
alt | string | Yes | — |
trigger | ReactNode | No | — |
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
className | string | undefined | No | — |
onCopy | (() => void) | undefined | No | — |
onDelete | (() => void) | undefined | No | — |
onMove | (() => void) | undefined | No | — |
onDownload | (() => void) | undefined | No | — |
moreActions | DropdownItem[] | undefined | No | — |
data-rebar-* attributes
data-rebar-component="lightbox"; parts: trigger, thumbnail, image, actions. The fullscreen dialog itself carries Dialog's own attributes.
Migrating to Ant Design
AntD bundles fullscreen preview directly into its own Image component (a preview prop) rather than as a separate component — a migration typically folds this into that prop instead of keeping a standalone lightbox.