ImagePreview

Image thumbnail tile with remove/retry actions and uploading and error overlays.

ImagePreview is a square thumbnail tile for files being uploaded — it shows the image plus optional remove and retry controls, and overlays a progress or error state. Pass the src and an optional name; drive the overlay with status ('idle' | 'uploading' | 'error') and progress. It is transport-free, so you own the object URL and wire onRemove/onRetry yourself.

Example

Preview

cover.jpg

48%

import { ImagePreview } from '@officina/ui';

<ImagePreview
  src={objectUrl}
  name="avatar.png"
  status="uploading"
  progress={64}
  onRemove={() => removeFile(id)}
  onRetry={() => retryUpload(id)}
/>;

API

Prop	Type	Default	Description
src*	string	—	Image source URL or object URL.
alt	string		Alt text for the thumbnail.
name	string	—	Optional file name shown as a caption/overlay.
onRemove	() => void	—	Called when the remove button is clicked. Omit to hide it.
onRetry	() => void	—	Called when the retry button is clicked (shown on error).
progress	number	—	Upload progress 0–100, shown over the thumbnail while `uploading`.
size	string \| number	96	Square edge length. Number → px, string → raw CSS size.
status	enum	idle	Current upload state — drives the overlay and styling.

Example

API

On this page