Thumbnail

Fixed-size image preview.

Examples

import { Thumbnail } from '@var-ui/react';

const previewUrl = '…';

<Thumbnail src={previewUrl} alt="Preview image" />

Built on React Aria Components where applicable.

Prop	Type	Default	Description
`alt`	`string`	—	Accessible description of the image.
`src`	`string`	—	Image URL for the preview.
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`dismissLabel`	`string \| undefined`	`Remove`	Accessible label for the remove button.
`onDismiss`	`(() => void) \| undefined`	—	When provided, renders a remove button that calls this handler on press.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`md`	Tile dimensions.

Theme this component via createDesignTheme({ components: { thumbnail: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core thumbnail().

Name	Example	Description
`class`	`var-ui-thumbnail`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-thumbnail__image`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-thumbnail__dismiss`	Root / part class name
`data-size`	`md`	Recipe variant / state attribute from `@var-ui/core`.

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.