Usage

Props

The component also supports accessibility roles: figure (default) and checkbox.

NameTypeRequiredDefaultDescription
alt
string
false

Alt text for the Thumbnail image

since

11.6.0

caption
string
false

Thumbnail caption

default

''

since

10.19.0

children
ReactNode
false
className
string
false

Additional classNames

clickable
boolean
false
since

10.19.0

disabled
boolean
false

Use "disabled" view

default

false

since

10.19.0

error
boolean
false
since

10.19.0

filename
string
false

Unless variant is provided, filename is used to choose a placeholder icon based on extension. E.g. for 'filename="panda.png"', image {' '} variant will be used

since

11.7.0

focused
boolean
false

Use "focused" view

default

false

since

10.19.0

hasCaptionPlaceholder
boolean
false

Show placeholder for caption if it is empty

default

false

since

10.19.0

label
string
false

Thumbnail label

default

''

since

10.19.0

qa
QaTags
false
since

10.19.0

selected
boolean
false

Use "selected" view

default

false

since

10.19.0

size
SizeVariant
false

Thumbnail size

default

'lg'

since

10.19.0

src
null | string | File
false

An image URL or a File to generate a preview for

since

10.19.0

style
CSSProperties
false

Additional CSS styles

tabIndex
number
false
since

11.6.0

variant
ThumbnailDocumentIconVariant
false
since

11.7.0

onClick
Function
false
since

11.6.0

Demo

Image URL Source

File Source

Creates previews for images. For other kinds of files, it falls back to Thumbnail.Placeholder.

Roles

role=figure

role=checkbox

Props

Empty source

Thumbnails fall back to Thumbnail.Placeholder if src is not provided, detecting placeholder type based on caption.

Thumbnail.Placeholder

Props

Thumbnail.Placeholder supports the same set of props as Thumbnail.

Variants

Note: the tooltips are used for demo purposes only

Demo