# Thumbnail

Fixed-size image preview.

## Examples

### Default

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

const previewUrl = '…';

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

```astro
---
// No @var-ui/astro Thumbnail — use core recipe markup.
import { thumbnail } from '@var-ui/core';

const s = thumbnail({ size: 'md' });
const previewUrl = '…';
---

<span class:list={[s.root]}>
  <img class:list={[s.image]} src={previewUrl} alt="Preview image" />
</span>
```

```html
<span data-size="md" class="var-ui-thumbnail"><img data-size="md" class="var-ui-thumbnail__image" src="…" alt="Preview image" /></span>
```

## Props

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

## Accessibility

Built on React Aria Components where applicable.