Avatar

Open in Playground

Shows the image at src (any image URL) if it loads, otherwise initials from name. size: sm, md, lg. shape: circle (default), rounded, square.

KMKMKMKMKM

Images, custom content and links. Pass children (an icon or your own <img>) to show it instead of the initials, and href to make the avatar a link to a profile or page. target, rel and onClick go to the link, and linkComponent / linkProp swap in a router link like AppBar. The order is: image, then children, then initials. name is the accessible name, for the link too.

Props

  • srcstring

    Image URL; shown if it loads, otherwise children or initials are.

  • altstring
    Default: ''

    Alt text of the image. Leave empty when name already says who it is.

  • namestring

    Person’s name (initials and accessible name, also for the link).

  • size'sm' | 'md' | 'lg'
    Default: 'md'

    Size.

  • shape'circle' | 'rounded' | 'square'
    Default: 'circle'

    Outline of the avatar.

  • hrefstring

    Makes the avatar a link to this URL.

  • linkComponentElementType
    Default: 'a'

    Component used for the link, e.g. a router Link.

  • linkPropstring
    Default: 'href'

    Name of the destination prop on linkComponent (e.g. "to" for react-router).

  • childrenReactNode

    Custom content (icon, <img>) shown instead of the initials.

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • ...rest

    Any other props are passed to the underlying element.