Thumbnail - Admin Components

Note: This component is available since Medusa v2.21.0.

The Thumbnail component shows a small image in a bordered box, falling back to a photo icon when there's no image. The Medusa Admin uses it next to product names in tables and lists.

Code
import { Thumbnail } from "@medusajs/dashboard/components"

Example#

Use Thumbnail in a widget or UI route to show a record's image:

Code
import { Thumbnail } from "@medusajs/dashboard/components"
import { Text } from "@medusajs/ui"

const ProductItem = ({ product }) => {
  return (
    <div className="flex items-center gap-x-3">
      <Thumbnail
        src={product.thumbnail}
        alt={product.title}
        size="small"
      />
      <Text size="small">{product.title}</Text>
    </div>
  )
}

Props#

The component accepts the ThumbnailProps type:

srcstring | nullOptional

The image's URL. When you don't pass it, Medusa shows a photo icon as a placeholder.

altstringOptional

The image's alternative text.

size"small" | "base"Optional

The thumbnail's size.

Default: base

Found a problem with this page?Report Issue

Edited Nov 14·Edit this page