Avatar

The Avatar component is used to represent a user or a entity. It displays a picture or a fallback to initials.

View source code
  • text
    string

    The text to display whether src is not provided or src is not valid. The text will be truncated to one character. Random colors, based on the truncated text, will be assign automatically as background and text color.

  • badgeProps
    AvatarBadgeProps

    Whether the Avatar should contains a badge

  • className
    string

    className for the element

  • fallbackSrc
    string

    The fallback source to display when src is not provided or src is not valid. If defined, the Avatar component will not fallback on text initials.

  • iconName
    "adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-path" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | "arrow-uturn-left-down" | "arrow-uturn-right-top" | ... 140 more ...

    The name of the icon to display

  • lazyLoad
    boolean

    Whether the Avatar src should be lazy loaded

    Default: false
  • size
    16 | 24 | 32 | 40 | 56

    Specifies the size of the element.

    Default: 32
  • src
    string

    The image URL

  • variant
    "circle" | "square"

    Whether the Avatar should be square or circle

    Default: circle