Album Lightbox Favorites Filter

ProNew

Use this when people sort through an album: a lightbox gallery where each photo in the viewer has a favourite heart and a toggle above the grid narrows it to favourites only.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for albums, proofing galleries and moodboards where people shortlist while viewing full size and then want to see only what they picked.

Do not use it when favourites must be saved to an account on every tap without feedback; wire onFavouritesChange to your API and show errors where the heart is.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`photos`	`AlbumPhoto[]`	`-`	Photos as `{ id, alt, caption?, thumb, full }`.
`label`	`string`	`-`	Names the grid, the dialog and the viewer.
`defaultFavourites`	`string[]`	`[]`	Photo ids that start as favourites.
`onFavouritesChange`	`(ids: string[]) => void`	`-`	Called whenever a heart is toggled.

Accessibility

The heart is a button with aria-pressed named "Favourite photo"; its state is not carried by colour alone (the heart fills and the pressed state is announced).
The filter is a toggle button with aria-pressed; the visible count is a polite live region.
Opening and closing follow the lightbox gallery: focus is trapped in the viewer and returns to the thumbnail.
Keyboard: Left / Right: previous or next photo in the viewer
Keyboard: Escape: close the viewer

Testing

The pattern ships with a Testing Library test (album-lightbox-favorites-filter.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.