| title |
|
||
|---|---|---|---|
| layout | DetailComponent | ||
| sidebar |
|
||
| data |
|
Choose the avatar kind that best matches the identity you’re communicating. Avatars can represent an individual person or a named non-person entity such as a team, organization, or business. Person and Entity kinds use different shapes to help users quickly understand what the avatar represents.
Use kind=”person” when the identity is a single individual (e.g., user profile, author, assignee, commenter). We recommend using an image when available; otherwise fall back to initials or a person icon. If you need to represent multiple people together, use Avatar Group.
Use kind="entity" when the identity is a named non-person entity such as a team, business, organization, company, or account. Use an Entity avatar when representing the team as a single named identity; use Avatar Group when representing the team’s members. Use a logo/image when available; otherwise use entity initials/code or an appropriate icon (e.g., office/building).
You can pass an image as the avatar image using the src prop.
You can also pass a custom image or SVG as the child of the component. Note that for images passed as children, you'll also need to handle the fallback logic.
If a photo isn't available, the avatar will fall back to initials or an icon:
- You can use initials when a photo is unavailable, but profile information is.
- Use an icon when neither a photo nor profile information is available.
The color prop can be used to change Avatar's background to one of the 20 categorical colors.
Avatar can be made interactive using the render prop. Props defined on the JSX element will be merged with props from the Avatar.
Common interactive use cases include:
- Navigating to a user profile page when the avatar is clicked.
- Opening a menu with user-related actions (e.g., ‘Settings’, ‘Log out’).
- Ensure the Avatar has a meaningful accessible name so screen reader users understand what action will occur.
- Avoid using size modifiers on interactive avatars, as they can shrink the touch target and make them harder to interact with.
You can use the size prop to modify the avatar size. Each avatar variant has a default size across all four densities, equal to the size foundation size-base: 20px (HD), 28px (MD), 36px (LD), and 44px (TD). The size property acts as a multiplier of the base size.
Avatar is round by default. Setting shape="square" can help distinguish entities such as organizations, products or teams from individuals, but round remains a valid choice for these cases.
Avatar renders with an icon defined by UserSolidIcon, but you can pass an alternative icon as fallbackIcon.