Thumbnail

Square image preview for attachments and media.

Examples

Default

photo.jpg

<Thumbnail
  alt="Preview"
  label="photo.jpg"
  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
/>

Interactive

Open photo.jpg

<Thumbnail
  alt="Preview"
  label="Open photo.jpg"
  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
  onClick={fn()}
/>

Removable

photo.jpg

Remove photo.jpg

light-image.jpg

Remove light-image.jpg

dark-image.jpg

Remove dark-image.jpg

<HStack gap={3}>
  <Thumbnail {...args} />
  <Thumbnail
    {...args}
    alt="Light test image"
    label="light-image.jpg"
    src={solidImage('#ffffff')}
  />
  <Thumbnail
    {...args}
    alt="Dark test image"
    label="dark-image.jpg"
    src={solidImage('#22272d')}
  />
</HStack>

Disabled

photo.jpg

<Thumbnail
  alt="Preview"
  label="photo.jpg"
  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
  isDisabled
  onClick={fn()}
  onRemove={fn()}
/>

Loading With Image

Uploading photo.jpg

<Thumbnail
  alt="Preview"
  label="Uploading photo.jpg"
  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
  isLoading
/>

Image Error

Broken image

<Thumbnail
  alt="Broken preview"
  label="Broken image"
  src="/missing-thumbnail-image.jpg"
/>

Interactive Removable

Open or remove photo.jpg

Remove Open or remove photo.jpg

<Thumbnail
  alt="Preview"
  label="Open or remove photo.jpg"
  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
  onClick={fn()}
  onRemove={fn()}
/>

States

photo.jpg

Uploading

Missing image

<HStack gap={3}>
  <Thumbnail
    alt="Preview"
    label="photo.jpg"
    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=160&h=160&fit=crop"
  />
  <Thumbnail isLoading label="Uploading" />
  <Thumbnail label="Missing image" />
</HStack>

API

Thumbnail

Square image preview for attachments and media.

Prop	Type	Default	Description
alt	string	—	Alt text describing the image content. Use label for a file name or action label shown in the tooltip and button accessible names.
className	string	—	Additional CSS class names applied to the root.
data-testid	string	—	Test ID applied to the root.
isDisabled	boolean	false	Whether the thumbnail is disabled.
isLoading	boolean	false	Whether the thumbnail is loading.
label	string	—	File name or short item label used for the root accessible name, tooltip, and open/remove button labels. When omitted, alt is used as a fallback.
onClick	(event: MouseEvent<HTMLButtonElement>) => void	—	Called when the thumbnail image area is clicked.
onRemove	(event: MouseEvent<HTMLButtonElement>) => void	—	Called when the remove button is clicked.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
src	string	—	Image source.
style	CSSProperties	—	Inline styles applied to the root.