Lightbox

Lightbox opens an image in a full-viewport overlay with animated view transitions. The overlay covers the page in the App layout’s canvas color. The expanded image sits on a gray-200 plate of the same size, inset from the window edges. Transparent pixels show the plate instead of the backdrop.

Warning

This component is experimental and not yet stable for wide adoption. Use it with caution. Refer to the _stories.tsx file for detailed usage examples.

Installation

import { Lightbox } from "@o/pipeline/experimental/components/lightbox";

Usage

Default

Small images

Demonstrates that images smaller than the viewport render at their native size, without stretching to the full viewport dimensions.

Transparent images

The expanded plate is the image’s own box, so alpha shows gray-200 rather than the backdrop.

Actions

Lightbox.Download, Lightbox.CopyImage, and Lightbox.CopyLink sit in Lightbox.Header before Lightbox.Close. Each owns its handler, tooltip, and toast, so it needs only the image src (or the link value). Lightbox.CopyImage writes pixels to the clipboard as a PNG, not the URL. Download and copy image fetch remote images, so the image host must allow CORS; when it does not, the action toasts an error.

<Lightbox.Header>
  <Lightbox.Download src={src} filename="screenshot.png" />
  <Lightbox.CopyImage src={src} />
  <Lightbox.CopyLink value={src} />
  <Lightbox.Close />
</Lightbox.Header>

For anything else, Lightbox.Action takes a label that names an icon-only button and shows it as a tooltip. Actions in one Lightbox.Header share a single tooltip, which moves between them instead of waiting out its delay again.

Limitations

  • Browser support: The view transition runs only in Chromium-based browsers. Other browsers open and close the image without it (OP-2623)

Unsupported features

  • Zoom: Lightbox does not yet support pinch-to-zoom or scroll-to-zoom (OP-2626)