Usage

Thumbnail is a 64px preview. With no src it shows a placeholder. isLoading without src is a skeleton. isLoading with src covers the image with a spinner. Listen for click to make the preview a button, and for remove to show the dismiss control.

showRemoveOn is hover by default. The control also appears on keyboard focus, and it stays visible for a coarse pointer. always keeps it visible. isDisabled fades the thumbnail and ignores both events.

label is the accessible name. It is not drawn on the thumbnail. It is used by the tooltip and by the remove button.

<script setup lang="ts">
import { Thumbnail } from '@astryx-vue/core/Thumbnail'
</script>

<template>
  <Thumbnail src="/photo.jpg" alt="Snowy mountain peaks" label="snowy-peaks.jpg" />
</template>

Anatomy

Element	Description
Image	The preview image, displayed as a square with cover fit.
Placeholder	An image silhouette icon shown when no src is provided.
Remove button	An overlaid close button in the top-right corner. Visibility follows showRemoveOn, which defaults to hover. Activating it emits remove. Sits on a fixed --color-overlay scrim with an --color-on-dark icon to stay visible on any image.
Upload overlay	A semi-transparent overlay with a spinner, shown when isLoading is true and a src preview is available.
Skeleton	A shimmer animation shown when isLoading is true and no src is set.

Best practices

Guidance	Practices
Do	Give alt what the image shows, and label the file name a person would use to remove it.
Do	Use showRemoveOn="always" when the pointer may be coarse, or when removal is the main action.
Do	Keep a placeholder until a file has a preview, then pass src.
Don't	Put the file name in the visible square. The tooltip already carries label.
Don't	Attach click and expect it to fire while isDisabled or isLoading is set.

Examples

Thumbnail — Disabled

Enabled

Disabled

Thumbnails in the disabled state with reduced opacity. The remove button and click handler are suppressed when disabled.

Thumbnail — Gallery

Click to preview, dismiss to remove

A row of clickable thumbnails with labels that open a detail view. Use for image attachment lists where users need to preview and manage uploads.

Thumbnail — Removable

Remove button adapts contrast to image luminance

Thumbnails with a remove button overlay. The close button stays visible on both dark and light images.

Thumbnail — States

Lifecycle: empty → uploading → processing → loaded

Placeholder

Skeleton

Uploading

Loaded

All visual states side by side: image loaded, placeholder, skeleton loading, and upload overlay.