Avatar | Pol-ui - A beautiful and functional UI library for React and Next.js

Introduction

The avatar component can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.

All of the example are built as React components and you can access custom props and methods to customize the component and you can also use Tailwind CSS classes to style the component.

To start using the avatar component you need to import it from the pol-ui package:

import { Avatar } from "pol-ui";

Default avatar

Here's a default example of the <Avatar> component where you can use the img prop to pass the image URL, the alt prop to pass a description of the image for accessibility and the rounded prop to make the avatar rounded.

Default avatar

import { Avatar } from "pol-ui";
import React from "react";
const AvatarComponent = () => {
  return (
    <Avatar
      alt="Your avatar"
      img="https://avatars.githubusercontent.com/u/63197171?s=48&v=4"
    />
  );
};
export default AvatarComponent;

Props

Prop name	Type	Default	Description
alt	string		The alt text for the image.
img	string		The image URL.
bordered	bool	false	Add a border to the avatar.
color	Colors	'secondary'	The color of the avatar.
size	MainSizes	'md'	The size of the avatar.
status	AvatarStatus	undefined	The status of the avatar.
stacked	bool	false	Stack the avatar. Useful in groups
placeholderInitials	string	undefined	The initials to be used as a placeholder if the image is not provided.
statusPosition	Positions	'top-left'	The position of the status badge.
theme	AvatarTheme	avatarTheme	The theme of the component.

Examples

All Avatar Sizes

The size prop can be used to set the size of the avatar component. You can use the following values: xs, sm, md, lg and xl.

All Avatar Sizes

import { Avatar, MainSizes, MainSizesEnum } from "pol-ui";
import React from "react";
const AvatarComponent = () => {
  return (
    <div className="flex flex-wrap gap-6">
    {Object.keys(MainSizesEnum).map(size => (
      <div key={size} className="flex flex-col items-center justify-center">
        <Avatar
          alt="Your avatar"
          img="https://avatars.githubusercontent.com/u/63197171?v=4"
          size={size as MainSizes}
          className="mb-2"
        />
        <span className="text-gray-500">{size}</span>
      </div>
    ))}
  </div>
  );
};
export default AvatarComponent;

All Avatar Status

Status can be used to show the current status of the user or team account. You can use the status prop to set the status of the avatar component.

For example, you can use the status busy to show that the user is busy...

All Avatar Sizes

import { Avatar, MainSizes, MainSizesEnum } from "pol-ui";
import React from "react";
const AvatarComponent = () => {
  return (
    <div className="flex flex-wrap gap-6">
    {Object.keys(MainSizesEnum).map(size => (
      <div key={size} className="flex flex-col items-center justify-center">
        <Avatar
          alt="Your avatar"
          img="https://avatars.githubusercontent.com/u/63197171?v=4"
          size={size as MainSizes}
          className="mb-2"
        />
        <span className="text-gray-500">{size}</span>
      </div>
    ))}
  </div>
  );
};
export default AvatarComponent;

All rounded avatars

A group of avatars can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.

All rounded avatars

import { Avatar, RoundedSizes, RoundedSizesEnum } from "pol-ui";
import React from "react";
export const AllRoundedAvatars = (): JSX.Element => (
  <div className="flex flex-wrap gap-6">
    {Object.keys(RoundedSizesEnum).map(v => (
      <div key={v} className="flex flex-col items-center justify-center">
        <Avatar
          alt="Your avatar"
          img="https://avatars.githubusercontent.com/u/63197171?v=4"
          rounded={v as RoundedSizes}
          className="mb-2"
        />
        <span className="text-gray-500">{v}</span>
      </div>
    ))}
  </div>
)
export default AllRoundedAvatars;

Avatar group

A group of avatars can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.

Group of avatars

import { Avatar, MainSizes, MainSizesEnum } from "pol-ui";
import React from "react";
const AvatarComponent = () => {
  return (
    <Avatar.Group {...args}>
      <Avatar
        img="https://avatars.githubusercontent.com/u/104431726?v=4"
        stacked
      />
      <Avatar
        img="https://avatars.githubusercontent.com/u/104431726?v=4"
        stacked
      />
      <Avatar
        img="https://avatars.githubusercontent.com/u/94074414?s=80&v=4"
        stacked
      />
      <Avatar
        img="https://avatars.githubusercontent.com/u/78301921?s=80&v=4"
        stacked
      />
      <Avatar.Counter total={99} href="#" />
    </Avatar.Group>
  );
};
export default AvatarComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface AvatarTheme {
  root: {
    base: string;
    bordered: string;
    color: ColorsType;
    img: AvatarImageTheme;
    initials: AvatarInitialsTheme;
    rounded: string;
    size: MainSizesType;
    stacked: string;
    status: AvatarStatus & {
      base: string;
    };
    statusPosition: Positions;
  };
  group: {
    base: string;
  };
  groupCounter: string;
}

References

Additional types, AvatarStatusEnum

The AvatarStatusEnum is an enum that you can use to set the status of the avatar component. If you rather use a string, you can use the following values: away, busy, offline and online.

export enum AvatarStatusEnum {
  away = 'away',
  busy = 'busy',
  offline = 'offline',
  online = 'online',
}