Thumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while uploading, the image on success, and a placeholder icon when no source is set. Use it in chat composers, file upload lists, or anywhere you need a small image preview with optional remove and click actions.
Preview loads on approachPreview loads on approach
Exact source · thumbnail-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Thumbnail} from '@astryxdesign/core/Thumbnail';
// Inline same-origin data URI so the example is self-contained — see
// ThumbnailRemovable for why image-backed Thumbnails avoid cross-origin URLs.
const SNOWY_PEAKS =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAwFBMVEX////6/P/4+//g7vjf7fbf7fTe7fje7fTe7PTd7Pjc7Pfd7PTc6/Xc6/Pb6/fb6/Xb6vTa6/fa6/Xa6vfZ6vfZ6vba6vTZ6fXY6vfY6vbY6ffY6fXX6fbX6fTW6fbX6PXW6PbW6PTV6PbV6PXU6PbV5/XU5/bU5/TU5vXT5/bS5/XT5vTS5vXS5vTR5vXR5fXQ5fXP5fXP5PXO5PXO5PTN5PTN4/TM4/TL4/TM4vTL4vTK4vTO3OqqvtKbrsFcfGgMVnjaAAAC7klEQVR42u2Ta3eaQBCGp0kbTbBBMWDMoiCWEOsFtV4SdcP//1edYQUWwSye9kNOT58POVlm3mdmUWG/3+9et5vVYj6bjoMgGE9n88Vqs33d7SsBcX67WmI+EKBhudpWNcBu94bzlyGO9weEj0uES9zhbVcFSPMYdxzmOKi4xACbNa0/DgY91rGIDusNgjFdY72tAKzXq0U4pTyGm80m/iXDNFys1psqApwf4nwc32x+J9DRYbhDuMRrqIF5vD+zKK0R5LBYfIvFcqUEBZPRsNex9IaW0NCtTm84mqDglxIIQ3z/uEBDqydoDVrBH4d4CyUwowUsA+fXa4I67mBYtAJeQglM4jeg0wLfBLSCLt5COFcC4xffYVZ8gVSABos5/sskVAOjYNjvWrqWxGOFplvd/jD4OZkpgSAYiA1yAtpgGIzGEyW0wYCZeqOeGer1hm6yQUXBD8+1uySofU2okaBre97zSA34nuswk74GqYC+CCZzXM9/VgO+77o2M+LPUcTpUzSYXS3/DB7m4ztomrhEjb7LeAPbdb0KgOe5fTIY6Y8B51O+Xynvgeu6js2Yaep6Q6DrpsmY7biVABthXdPEFfRj3sBTl9nl8JNzLMANSGEahm5QGuNn8/zEAE8xD0g7hrfbdHgqhxO5J/B4BEMtBOv43+M5YkHuCTxk0HwuDGfgvNAAbZljQ/sMnEOhAVoSPKFVCuYBThvgXiKdcF8GlwRZB+Tz8IEhLhca4C6F8yusH0TDXYFjPjEkj+E2gecm8NsT+IkgaQBVQ6F80gA3Ai4uANkl+I0ElYlDjNwAhXyp4Zg/Cg4FAS+dwAsLiPq7PAGuEc5LJ3B+LUjLSf2Q1aGk4V1uyJVTQdYAqgZ5v7T+nu0IuXwmkAwf1yE3IJuQjZDLkiBpAK5o4BUEV6UNh5J8SR1y9VzDoZgvqasFV2frByFQNCgFX/6Q/4J/SxDJTy84/DVBFEmlSw6fRhBFUumiw2cRRJFUuuzwG+qew9oBo+n5AAAAAElFTkSuQmCC';
export default function ThumbnailShowcase() {
return (
<Thumbnail
src={SNOWY_PEAKS}
alt="Snowy mountain peaks"
label="snowy-peaks.jpg"
/>
);
}
Usage
Thumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while uploading, the image on success, and a placeholder icon when no source is set. Use it in chat composers, file upload lists, or anywhere you need a small image preview with optional remove and click actions.
Always provide a label prop with the file name so the thumbnail and its remove button are accessible to screen readers and show a tooltip on hover.
Use isLoading without a src to show a skeleton during initial upload, and isLoading with a src to show a spinner overlay once a preview URL is available.
Pair onClick with a lightbox or detail view so users can inspect the full image; the thumbnail adds button semantics and a hover overlay automatically.
Don't use Thumbnail for non-image file types like PDFs or spreadsheets; use a file attachment component with an appropriate icon instead.
Don't omit alt text when a src is provided; screen readers need a description of the image content, not just the file name from label.
Typed props
Prop
Type and behavior
src
string
Image source URL.
alt
string
Alt text for the image. When omitted, the image is explicitly decorative (alt="", role="presentation", aria-hidden) and hidden from screen readers; a dev warning fires if neither alt nor label is set.
label
string
Accessible label (e.g. file name). Shown as tooltip on hover.
onRemove
(e: React.MouseEvent) => void
Callback for the overlaid remove button.
onClick
(e: React.MouseEvent) => void
Click handler. Adds button semantics and a hover overlay.
isLoading
boolean · default false
Shows skeleton (no src) or upload overlay (with src).
isDisabled
boolean · default false
Whether the thumbnail is disabled.
showRemoveOn
'always' | 'hover' · default 'hover'
When the remove button is visible. hover (the default) reveals it on hover and on keyboard focus, and keeps it visible on any touch-capable device; always shows it at rest. Only applies when onRemove is set.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
className
string
CSS class name for the root element. Prefer xstyle for styling; className is provided for integration with non-StyleX systems.
style
CSSProperties
Inline styles for the root element. Prefer xstyle for styling; inline styles bypass StyleX optimization.
data-testid
string
Test selector for automated testing frameworks.
Anatomy
Image · optional
The preview image, displayed as a square with cover fit.
Placeholder · optional
An image silhouette icon shown when no src is provided.
Remove button · optional
An overlaid close button in the top-right corner. Appears when onRemove is set. Sits on a fixed --color-overlay scrim with an --color-on-dark icon to stay visible on any image.
Upload overlay · optional
A semi-transparent overlay with a spinner, shown when isLoading is true and a src preview is available.
Skeleton · optional
A shimmer animation shown when isLoading is true and no src is set.
Theming
Targets
astryx-thumbnail
Variables
--_thumbnail-hit-inset · private
Outset of the remove button's invisible hit area, applied to a ::after overlay. 0 on a fine pointer; negative on a coarse one, which grows the 20px button to the 24px touch target without changing what is drawn.
