Image Metadata
betaAn image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add image-metadatanpm packages installed: class-variance-authority.
import { ImageMetadata } from "@/components/ui/image-metadata";Default
Gallery
Open By Default
Without Actions
<ImageMetadata>
| Prop | Type | Default |
|---|---|---|
alt (required) | string | — |
filename (required)Heading of the panel, e.g. the file name. It names the panel. | string | — |
metadata (required)Rows of the metadata table. | ImageMetadataField[] | — |
src (required) | string | — |
actionsControls shown in the row beside the details toggle — Share, Connect. | ReactNode | — |
closeLabelAccessible name of the close button. | string | "Hide details" |
defaultOpen | boolean | false |
description | ReactNode | — |
imageClassName | string | — |
onOpenChange | (open: boolean) => void | — |
open | boolean | — |
openLabelAccessible name of the toggle. | string | "Show details" |
shape | "rounded" | "square" | "rounded" |
Plus every attribute of <div> except children.
A disclosure: the details toggle has aria-expanded and aria-controls, and the panel is a region named by the file name. Opening moves focus to the panel's Close button (the toggle it replaces is hidden); closing, with that button or Escape, returns focus to the toggle. Whichever of the action row and the panel is not shown is inert and aria-hidden. Metadata is a description list. The image needs real alt text. The lift and blur transitions stop under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes