Lightbox
ProA full-screen overlay for viewing images, videos, or media at maximum resolution with a dark backdrop. Supports single-image view and gallery mode with arrow navigation between items. Includes a close button, optional caption text, thumbnail strip for gallery navigation, and pinch-to-zoom on touch devices. Traps focus and locks body scroll while open.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | Lightbox displaying a single image or media item with close button and optional caption. | Use when a user clicks to enlarge a single image or media element. |
| Gallery | Lightbox with arrow navigation, item counter, and optional thumbnail strip for browsing a collection. | Use for image galleries, product photos, or portfolio collections. |
Usage Guidelines
Provide a clearly visible close button and support Escape to dismiss.
Auto-play a gallery carousel — let the user control navigation.
Show the current item index and total count in gallery mode — "3 of 12".
Remove the close button or rely solely on clicking the backdrop to dismiss.
Preload adjacent images in gallery mode for smooth navigation.
Show the lightbox for non-media content — use a Modal instead.
Support pinch-to-zoom on touch devices for image inspection.
Disable keyboard navigation in gallery mode.
Code
Design Tokens
Accessibility
- Use role="dialog" with aria-modal="true" and a descriptive aria-label.
- Focus must be trapped within the lightbox while open.
- On open, move focus to the close button or the first interactive control.
- On close, return focus to the element that triggered the lightbox.
- In gallery mode, announce the current image position — "Image 3 of 12".
- Navigation arrows must have descriptive aria-labels — "Next image", "Previous image".
- Alt text from the original image should be available in the lightbox view.