Avatar

Avatar component is used to display user's profile picture or initials or icons along with badges.

import {
  Avatar,
  AvatarDefaultStatusIndicators,
  AvatarIcon,
  AvatarImage,
  AvatarInitials,
  AvatarStatusIndicator,
  AvatarWrapper,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage

<Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=61" circular={false}  />

<Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=61" circular={false}  />

Squared

Avatar sizes

Sizes can be set using the size prop. The default size is xl. The available sizes are: xs sm md lg xl 2xl 3xl

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xs"
        name="Leanne Graham"
        src="https://i.pravatar.cc/300?img=1"
      />
      <Avatar
        size="sm"
        name="Ervin Howell"
        src="https://i.pravatar.cc/300?img=11"
      />
      <Avatar
        size="md"
        name="Clementine Bauch"
        src="https://i.pravatar.cc/300?img=21"
      />
      <Avatar
        size="lg"
        name="Patricia Lebsack"
        src="https://i.pravatar.cc/300?img=31"
      />
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
      <Avatar
        size="2xl"
        name="Dennis Schulist"
        src="https://i.pravatar.cc/300?img=51"
      />
      <Avatar
        size="3xl"
        name="Chris Evans"
        src="https://i.pravatar.cc/300?img=61"
      />
    </div>
  );
};

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xs"
        name="Leanne Graham"
        src="https://i.pravatar.cc/300?img=1"
      />
      <Avatar
        size="sm"
        name="Ervin Howell"
        src="https://i.pravatar.cc/300?img=11"
      />
      <Avatar
        size="md"
        name="Clementine Bauch"
        src="https://i.pravatar.cc/300?img=21"
      />
      <Avatar
        size="lg"
        name="Patricia Lebsack"
        src="https://i.pravatar.cc/300?img=31"
      />
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
      <Avatar
        size="2xl"
        name="Dennis Schulist"
        src="https://i.pravatar.cc/300?img=51"
      />
      <Avatar
        size="3xl"
        name="Chris Evans"
        src="https://i.pravatar.cc/300?img=61"
      />
    </div>
  );
};

Avatar styles

Avatar comes in two styles, circular & squared

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
      <Avatar
        size="xl"
        name="Dennis Schulist"
        src="https://i.pravatar.cc/300?img=51"
        squared={true}
      />
    </div>
  );
};

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
      <Avatar
        size="xl"
        name="Dennis Schulist"
        src="https://i.pravatar.cc/300?img=51"
        squared={true}
      />
    </div>
  );
};

Avatar fallbacks

If there is an error loading the src of the avatar, there are 2 fallbacks:

If there's a name prop, we use it to generate the initials.
If there's no name prop, we use a default avatar.

If both name and src are not provided you can pass a icon prop to show any content, icon has the lowest priority thus if name or src is provided fallback will be ignored.

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://bit.ly/broken-link"
      />
      <Avatar
        size="xl"
        name="Dennis Schulist"
        src="https://bit.ly/broken-link"
      />
      <Avatar size="xl" src="https://bit.ly/broken-link" />
      <Avatar size="xl" icon={<InfoCircleIcon />} />
    </div>
  );
};

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        size="xl"
        name="Chelsey Dietrich"
        src="https://bit.ly/broken-link"
      />
      <Avatar
        size="xl"
        name="Dennis Schulist"
        src="https://bit.ly/broken-link"
      />
      <Avatar size="xl" src="https://bit.ly/broken-link" />
      <Avatar size="xl" icon={<InfoCircleIcon />} />
    </div>
  );
};

Avatar with status indicators

You can show status icons at the right corner of the Avatar using status prop. Each avatar sizes has its own status indicators sizes.

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        status="active"
        size="xl"
        name="Leanne Graham"
        src="https://i.pravatar.cc/300?img=1"
      />
      <Avatar
        status="sleep"
        size="xl"
        name="Ervin Howell"
        src="https://i.pravatar.cc/300?img=11"
      />
      <Avatar
        status="away"
        size="xl"
        name="Clementine Bauch"
        src="https://i.pravatar.cc/300?img=21"
      />
      <Avatar
        status="typing"
        size="xl"
        name="Patricia Lebsack"
        src="https://i.pravatar.cc/300?img=31"
      />
      <Avatar
        status="org"
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
    </div>
  );
};

import { Avatar } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex space-x-2">
      <Avatar
        status="active"
        size="xl"
        name="Leanne Graham"
        src="https://i.pravatar.cc/300?img=1"
      />
      <Avatar
        status="sleep"
        size="xl"
        name="Ervin Howell"
        src="https://i.pravatar.cc/300?img=11"
      />
      <Avatar
        status="away"
        size="xl"
        name="Clementine Bauch"
        src="https://i.pravatar.cc/300?img=21"
      />
      <Avatar
        status="typing"
        size="xl"
        name="Patricia Lebsack"
        src="https://i.pravatar.cc/300?img=31"
      />
      <Avatar
        status="org"
        size="xl"
        name="Chelsey Dietrich"
        src="https://i.pravatar.cc/300?img=41"
      />
    </div>
  );
};

API Reference

Prop	Type	Default
`src`	`string`	-
`name`	`string`	-
`squared`	`boolean`	`false`
`size`	`union`	`xl`
`status`	`union`	`none`
`icon`	`React.ReactNode`	-
`statusIndicators`	`React.ReactNode`	-
`showRing`	`boolean`	`false`
`ringColor`	`string`	`ring-white`
`getInitialsFromName`	`string`	-
`parentsBackground`	`string[]`	`["bg-white", "ring-white"]`

Last updated on July 27, 2022

Avatar

Imports#

Usage#

Avatar sizes#

Avatar styles#

Avatar fallbacks#

Avatar with status indicators#

API Reference#

Imports