Avatar

The "Avatar" component is a versatile UI element designed to display visual identifiers for users, such as profile pictures or initials. It's widely used across applications to personalize user experiences, especially in sections related to user profiles, comments, or team pages.

Quick Start

To start using the Avatar component, import it from the reablocks library and provide the name prop.

import { Avatar } from 'reablocks';


export default function App() {
  return <Avatar name="Teddy Roosevelt" />
}

import { Avatar } from 'reablocks';

export default function App() {
  return <Avatar name="Teddy Roosevelt" />
}

Examples

Basic Usage

Displaying User Initials

The Avatar component can automatically generate and display initials based on the user's name. For names comprising multiple words, it uses the first letter of each word. For single-word names, only the first letter is displayed:

Displaying Profile Pictures

When a URL to a user's profile picture is available, the Avatar component can display the image within a circular frame, adhering to the common design pattern for user avatars:

Theme Customization

The Avatar component comes with a default theme that can be customized. The base theme includes styles for center alignment, background cover, and text styling, with an option to make the avatar rounded:

root{}(2 keys)

Learn more about how to customize in the Theme documentation.

API

Customize the Avatar component through the following properties:

Prop	Description	Default
`name`	The name of the person. `string`
`src`	The URL of the avatar image. `string`
`size`	The size of the avatar. `number`	`24`
`variant`	Style variant for the avatar. `"filled" \| "outline"`	`filled`
`rounded`	Whether the avatar is rounded. `boolean`	`true`
`color`	Color override for the avatar. `string`
`colorOptions`	Custom color options for the color generator. `{ saturation: number; lightness: number; alpha: number; }`
`theme`	Theme for the Avatar. `AvatarTheme`

Design and Usability Tips

Optimal Resolution: For user avatars, ensure that images are displayed at an optimal resolution to maintain visual clarity without unnecessarily burdening the page load times. Consider implementing a standard size for avatars across your application to create a consistent and professional appearance.

Sort Avatar Group