Avatar

The Avatar component is used to display a user's profile image, initials, or a fallback icon.

Usage

Basic usage

import { Avatar } from '@snipshot/particles';

export default function AvatarDefault() {
  return <Avatar src="https://thispersondoesnotexist.com/" alt="Random avatar image" />;
}

Name initials

With the name prop you can specify the user's full name and automatically have generated initials to display as a fallback when the avatar image is not available. Here is the example for Maria Guzman:

Bordered Styling

To add a border to the avatar image, you can use the bordered prop:

With bordered prop you can choose from predefined color options by setting the color prop. The available color options are: primary, secondary, tertiary, info, success, warning, error.

Sizes

You can also customize the size of the avatar using the size prop. Available size options are: xs, sm, md, lg, xl, xxl.

Radiuses

You can customize the border radius by providing a radius prop value.

Disabled State

You can apply a disabled styling to the avatar by setting the disabled prop to true. This reduces opacity and provides visual feedback that the avatar is disabled.

Icons

In cases when you want to use an icon as an avatar image or when the avatar image is not available, you can specify a fallback icon instead of initials. Pass your icon component to the icon prop or use the 'default' value.

Avatar group

The AvatarGroup allows you to display multiple avatars within a unified group.

You can easily control the maximum number of avatars to display within the group using the max prop. If the number of avatars exceeds this limit, the component will automatically handle the overflow, ensuring a clean and organized presentation. You can provide props to the "counter" avatar with the counterAvatarProps prop.

Polymorphic component

The Avatar is a polymorphic component, which means that you can use the as prop to specify any valid HTML element as a string or a React component. This chosen element will serve as the base for rendering the Button component, replacing the default <img> element.
The avatar below is rendered as a <span> element:

Accessibility

• Always include a meaningful alt description when providing an src image.
• In cases where the icon prop is used, provide an iconLabel description.

API Reference

Avatar component

AvatarGroup component

CSS custom properties

The Avatar and AvatarGroup components provide several CSS variables that can be used for styling via CSS modules or using a style attribute of the component.

Avatar

AvatarGroup