Avatar

Usage

To display an avatar, wrap text in an <Avatar>. By default, only the first letter will display.

A

import { Avatar } from "stylus-ui/Avatar";

export default () => <Avatar>Aaron Podolny</Avatar>;

Initials

To display more than one initial, increase the value of maxChar.

To

import { Avatar } from "stylus-ui/Avatar";

export default () => <Avatar maxChar={2}>Tony Gines</Avatar>;

Images

To display an image, simply wrap an img element in Avatar. Remember to set alt text!

import { Avatar } from "stylus-ui/Avatar";

export default () => {
  return (
    <Avatar size="xl">
      <img
        src="https://api.dicebear.com/9.x/micah/png"
        alt="A user avatar"
        className="w-full"
      />
    </Avatar>
  );
};

Scale images appropriately

Images should be compressed and scaled to thumbnail size to avoid slow page loads.

Icons

Sometimes it’s helpful to display an icon within an avatar, for example, when offering a way to invite a new user. To display an icon, import a FontAwesomeIcon and wrap it within Avatar.

import { Avatar } from "stylus-ui/Avatar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/pro-regular-svg-icons";

export default () => {
  return (
    <Avatar>
      <FontAwesomeIcon
        icon={faPlus}
        width={16}
        height={16}
        className="text-slate-500"
      />
    </Avatar>
  );
};

If the avatar is used without a nearby description, always add a title to FontAwesomeIcon to render it accessible to screen readers.

<Avatar>
  <FontAwesomeIcon
    icon={faPlus}
    width={16}
    height={16}
    className="text-slate-500"
    title="Invite user"
  />
</Avatar>

Shapes

Avatars can display as square. Use circular avatars for individuals and square avatars for organizations or groups.

A

import { Avatar } from "stylus-ui/Avatar";

export default () => <Avatar shape="square">Acme Inc</Avatar>;

Colors

Avatars can be styled with a color.

K

import { Avatar, type AvatarColor } from "stylus-ui/Avatar";

export default () => <Avatar color="cyan">Kassie Wong</Avatar>;

Automatic colors

To set the color automatically, pass a uuid. Commonly, this will be a userId.

E

import { Avatar } from "stylus-ui/Avatar";

// Fetch your user data
const exampleUser = {
  name: "Emily Moreton",
  userId: "1234567890",
};

export default () => (
  // Use `userId` (or another unique identifier) to set the avatar color
  <Avatar uuid={exampleUser.userId}>{exampleUser.name}</Avatar>
);

Themes

You can change the theme between dark (default) and light. The default dark theme provides high contrast on light backgrounds. To maintain contrast when the background is dark, set the theme to light.

L

import { Avatar } from "stylus-ui/Avatar";

export default () => <Avatar theme="light">Light Skywalker</Avatar>;

Anonymous users

If a user is unknown, import AnonymousAvatar instead of Avatar. AnonymousAvatar takes an faIcon prop to display an icon from FontAwesome. You don’t have to import the icon; just pass in a string.

import { AnonymousAvatar } from "stylus-ui/Avatar";

export default () => <AnonymousAvatar faIcon="faUser" />;

Groups

To display a group of avatars together, wrap Avatars in an AvatarGroup.

API Reference

Avatar

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
color	"orange""yellow""lime""emerald""cyan""blue""violet""fuchsia""rose""gray"	"blue"
maxChar	number	1
shape	"circle""square"	"circle"
size	"xxs""xs""sm""md""lg""xl""2xl""3xl"	"md"
theme	"light""dark"	"dark"
uuid	string

AnonymousAvatar

Inherits properties from HTMLElement.

Prop	Type	Default
faIcon	"faUser""faUserAlien""faUserAstronaut""faUserChef""faUserSecret""faUserDoctorHairLong""faUserHelmetSafety""faUserTieHairLong""faUserGraduate""faUserHairBuns""faUserVneckHairLong""faUserNinja""faUserPilot""faUserShakespeare""faUserRobot""faUserCrown""faUserCowboy"	"faUserAlien"
size	"xxs""xs""sm""md""lg""xl""2xl""3xl"	"md"