Content

Lightbox

Opens an image fullscreen, frameless on a dark scrim, with Close in the corner.

idle

Usage

import { LightboxGallery } from "@mizen-labs/ui";

Guidance	Practice
Do	Give the image useful alternative text and a clear title. Keep the close action visible.

Guidance	Boundary
Scope	Use Dialog for editing tasks. Image loading and source quality remain application responsibilities.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Lightbox`	`LightboxProps`	`Dialog defaults`	Uses Dialog open state, focus containment, dismissal, and restoration.
`LightboxTrigger`	`LightboxTriggerProps`	`Button`	Compose a trigger through the shared render API.
`LightboxPopup`	`LightboxPopupProps`	`Fullscreen`	Fullscreen overlay with Close in the corner. Escape or a click on the scrim also dismisses it.
`LightboxTitle / LightboxDescription`	`Dialog title and description props`	`Required title`	Name and describe the image for screen readers; both stay off screen.
`LightboxImage`	`LightboxImageProps`	`Contained image`	Requires src and alt; shows the image frameless at its own proportions within the viewport.
`LightboxClose`	`LightboxCloseProps`	`Button`	Optional additional dismissal action.
`LightboxGallery`	`LightboxGalleryProps`	`Required aria-label and images`	A grid of thumbnails that opens the fullscreen overlay. A pill with Previous, the position, and Next pages through the set, as do the arrow keys.

Content

Opens an image fullscreen, frameless on a dark scrim, with Close in the corner.

idle

import { LightboxGallery } from "@mizen-labs/ui";

Guidance	Practice
Do	Give the image useful alternative text and a clear title. Keep the close action visible.

Guidance	Boundary
Scope	Use Dialog for editing tasks. Image loading and source quality remain application responsibilities.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Lightbox`	`LightboxProps`	`Dialog defaults`	Uses Dialog open state, focus containment, dismissal, and restoration.
`LightboxTrigger`	`LightboxTriggerProps`	`Button`	Compose a trigger through the shared render API.
`LightboxPopup`	`LightboxPopupProps`	`Fullscreen`	Fullscreen overlay with Close in the corner. Escape or a click on the scrim also dismisses it.
`LightboxTitle / LightboxDescription`	`Dialog title and description props`	`Required title`	Name and describe the image for screen readers; both stay off screen.
`LightboxImage`	`LightboxImageProps`	`Contained image`	Requires src and alt; shows the image frameless at its own proportions within the viewport.
`LightboxClose`	`LightboxCloseProps`	`Button`	Optional additional dismissal action.
`LightboxGallery`	`LightboxGalleryProps`	`Required aria-label and images`	A grid of thumbnails that opens the fullscreen overlay. A pill with Previous, the position, and Next pages through the set, as do the arrow keys.