AvatarHealthy

Usage

Avatar is available in two variants, round and square. Initials from the name prop are used to select a color variant. However, if src is provided, the image is displayed with priority.

import { Avatar } from '@houzz/ui';

<HorizontalStack alignItems="center">
    <Avatar name="Emerson Yu" />
    <Avatar name="Chris Pestano" />
    <Avatar name="Jan Myler" />
    <Avatar name="Doug" />
    <Avatar name="Vita" />
    <Avatar name="山田太郎" />
    <Avatar name="No Human" src="https://thispersondoesnotexist.com" />
    <Avatar src="https://404" />
</HorizontalStack>

Size

Use the size prop to select from available size variants.

Color

These are all the color variants. These are selected automatically based on the name prop value.

Additional Customization

Tooltip

A tooltip displaying the full name can be turned on using the withTooltip prop. tooltipProps is available to configure the tooltip if needed.

Fallback implementation

The component will render the photo once the source (src) is provided, if the source is unavailable or the loading failed, the initials are shown instead. Icon fallback is used if everything else failed.

Custom fallback icon

Custom initials

A function passed into the getInitials prop can be used to implement a custom logic for extracting the initials from the name prop value.

Interactive avatar

The avatar can be rendered as a button or as a link if onClick or href props are set respectively.

Make sure to set the aria-label prop to clearly describe the action or link.