Thumbnail

Import

import {Thumbnail} from '@astryxdesign/core/Thumbnail';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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 se...

Important props

이 컴포넌트는 주요 variant prop보다 children/compound pattern 중심으로 사용합니다.

Theming targets

Best practices

• DoAlways 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.
• DoUse 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.
• DoPair onClick with a lightbox or detail view so users can inspect the full image; the thumbnail adds button semantics and a hover shadow automatically.
• Do notDon't use Thumbnail for non-image file types like PDFs or spreadsheets; use a file attachment component with an appropriate icon instead.