IconAvatar - Admin Components

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

The IconAvatar component renders an icon inside an avatar-like container, which the Avatar component from Medusa UI doesn't support. The Medusa Admin uses it in section headers and sidebar links, such as the location details page.

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

Example#

Show an icon avatar at the top of a widget:

Code
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { IconAvatar } from "@medusajs/dashboard/components"
import { Buildings } from "@medusajs/icons"
import { Container, Heading } from "@medusajs/ui"

const LocationWidget = () => {
  return (
    <Container className="flex items-center gap-x-3">
      <IconAvatar size="large" variant="squared">
        <Buildings />
      </IconAvatar>
      <Heading level="h2">Warehouse</Heading>
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.before",
})

export default LocationWidget

Props#

childrenReact.ReactNode

The icon to show in the avatar. Use an icon from the Medusa Icons package.

size"small" | "large" | "xlarge"Optional

The avatar's size.

Default: small

variant"squared" | "rounded"Optional

The avatar's shape.

Default: rounded

classNamestringOptional

Additional CSS classes to apply to the avatar's container.

Found a problem with this page?Report Issue

Edited Nov 14·Edit this page