Moxi Design System

# Avatars

The mx-avatar component is used to display a user's avatar. It can be used to display a user's initials, an image, or an icon.

To display an image or icon, set the imageUrl or icon prop respectively. To display initials, set the full-name prop. This will also be used for the aria-label attribute if not already set.

<mx-avatar full-name="John Smith" />
<mx-avatar image-url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" full-name="John Smith" />
<mx-avatar icon="ph-bold ph-hand-waving" aria-label="Agent" />
1
2

# mx-avatar

# Properties

Property Attribute Description Type Default
fullName full-name The name of the user (e.g. "John Smith"). If no imageUrl or icon is provided, this will be used to render a monogram as the avatar. This will also be used for the aria-label if not already provided. string ''
icon icon The class name(s) to apply to an <i> element to display an icon string ''
imageUrl image-url The URL of an image to display string ''

# Dependencies

# Used by

# Graph

graph TD;
  mx-banner --> mx-avatar
  style mx-avatar fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Badges →