Avatar Component Playground

Interactive playground to test all Avatar props and variants

Props

Type

Size

Image Source

Alt Text

Show Indicator

Current State

Type: image

Size: md

Show Indicator: No

Preview

Code

<Avatar type="image" size="md" src="/avatar/37fde98bde1164e665fa4742b512d7c31057a4ed.png" alt="Avatar" />

Props (JSON)

{
  "type": "image",
  "size": "md",
  "showIndicator": false,
  "indicatorVariant": "error",
  "src": "/avatar/37fde98bde1164e665fa4742b512d7c31057a4ed.png",
  "alt": "Avatar"
}

Examples

All Sizes (Image)

2XL

All Types (Medium Size)

Image

Icon

Initials

With Indicator