Plus UI ↗️Be Our Sponsor ↗️

Avatar

Avatars are an essential element found in a wide range of applications, from tables to dialog menus.

The Avatar component is used to represent users, providing a visual representation such as text initials, profile images, or icons. It comes with 60 variants and different customization options to fit various design requirements.

Anatomy

The anatomy of avatar component comprises key elements, including the avatar image, container, and optional customization properties. These elements enhance user interaction and engagement in your application.

Properties

With our properties and component structure, you have the creative freedom to tailor your avatar to precisely match your design preferences. All variable and variants identified exactly same on both our design system and our multi-framework component library.

Kind

The Avatar component supports different types to represent users in various ways.

  • Text type avatar displays initials representing the user's name.

  • Image type avatar displays a user's profile image.

  • Icon type avatar displays a custom icon to represent the user.

import React from 'react';
import { PlusAvatar } from '@plusui/react';

// Plus-Avatar Default Examples in React
const AvatarExamples = () => (
  <>
    <PlusAvatar />  {/* Default empty avatar */}
    <PlusAvatar text="John Doe" />  {/* Avatar with text */}
    <PlusAvatar image="https://i.pravatar.cc/50?u=4" />  {/* Avatar with image */}
  </>
);

export default AvatarExamples;

When no avatar image is available, the system uses the initials of the user's first and last name, capitalizing them. In the absence of user information, it substitutes with an icon.

  • A text avatar acquires the capitalized initials of both the user's first name and last name. However, for XS-sized avatars, it uses only the capitalized initial of the user's first name.

  • When both the first name and last name consist of more than two words, the text avatar will solely utilize the capital initials of the first and last names.

Size

The Avatar component supports different size variants such as extra small, small, medium and large to fit various design requirements.

You can also customize the size of the avatar component.

import React from 'react';
import { PlusAvatar } from '@plusui/react';

// Plus-Avatar with Different Sizes in React
const AvatarWithSizes = () => (
  <>
    <PlusAvatar size="xs" />  {/* Extra small avatar */}
    <PlusAvatar size="sm" />  {/* Small avatar */}
    <PlusAvatar size="md" />  {/* Medium avatar */}
    <PlusAvatar size="lg" />  {/* Large avatar */}
    <PlusAvatar size="54" />  {/* Custom size avatar with 54px */}
  </>
);

export default AvatarWithSizes;

Invert

The invert property provides the option to invert the color scheme of the avatar. This can be particularly useful for highlighting specific avatars or indicating a change in status or mode. By inverting the colors, you can draw attention to certain avatars and create a visually distinct user experience.

import React from 'react';
import { PlusAvatar } from '@plusui/react';

// Plus-Avatar with Invert Example in React
const AvatarWithInvert = () => (
  <>
    <PlusAvatar />  {/* Default avatar */}
    <PlusAvatar invert />  {/* Inverted avatar */}
  </>
);

export default AvatarWithInvert;

Shape

The shape property allows you to define the shape of the avatar. Avatars can take on one of two shapes: "circle" or "square." You can choose the shape that best aligns with your design preferences or the specific context in which the avatar is used.

  • Circle shape imparts a rounded, circular appearance to the avatar. It's often employed to create a softer and more approachable visual identity for users or entities.

  • Square shape imparts a square or rectangular appearance to the avatar. This shape provides a more geometric and structured visual style, suitable for various design contexts.

import React from 'react';
import { PlusAvatar } from '@plusui/react';

// Plus-Avatar with Shape Example in React
const AvatarWithShape = () => (
  <>
    <PlusAvatar />  {/* Default shape (circle) */}
    <PlusAvatar shape="square" />  {/* Square-shaped avatar */}
  </>
);

export default AvatarWithShape;

Layout & Spacing

Layout and spacing for avatar in user interfaces are crucial for usability, aesthetics, and accessibility. By paying attention to the placement and spacing of avatar, designers can create interfaces that are both visually appealing and user-friendly, ultimately enhancing the overall user experience.

Light & Dark Mode

Providing both light and dark modes for avatar in user interfaces enhances user comfort, choice, accessibility, and energy efficiency. It also aligns with contemporary design trends and accommodates a variety of user preferences and needs.

Accessibility

Accessibility is not only a moral and legal imperative but also a valuable design principle. Ensuring that avatar in a design system are accessible not only benefits users with disabilities but also leads to a more inclusive, user-friendly, and successful digital product.

To learn more about Plus UI's accessibility criteria, please visit Accessibility.

Design System

API

PreviousAlertNextBadge

Last updated