Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Design assets
  • Recommendations
  • Usage boundaries
  • API reference

Content

Thumbnail

Displays a square native image with a finite system size.

idle

Usage

import { Thumbnail } from "@mizen-labs/ui";

Examples

Design assets

Recommendations

GuidancePractice
Do

Choose a size that supports recognition. Describe informative images and use empty alt text for decorative ones.

Usage boundaries

GuidanceBoundary
Scope

Use Avatar for a person or identity. Image fetching and fallback policy remain application responsibilities.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
Thumbnail.src / Thumbnail.altstringRequiredProvides the image source and meaningful alternative text.
Thumbnail.size"sm" | "default" | "lg""default"Selects a 2rem, 3rem, or 4rem square image.
PreviousMarkdownNextTimestamp
Rows of lavender in ValensoleLavender stems in bloomA bee on a lavender flowerPaint swatches in soft colors

Small · 2rem

Rows of lavender under a pink evening sky

Default · 3rem

Rows of lavender under a pink evening sky

Large · 4rem

Rows of lavender under a pink evening sky