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.
Example#
Show an icon avatar at the top of a widget:
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#
Loading...
Was this page helpful?