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>;

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 Icon and wrap it within Avatar.

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

export default () => {
  return (
    <Avatar>
      <Icon icon={faPlus} className="size-4 text-slate-500" />
    </Avatar>
  );
};

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

<Avatar>
  <Icon
    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 icon prop to display an icon from Font Awesome. You don’t have to import the icon; just pass in a string.

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

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

Anonymous users with color background

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

export default () => (
  <AnonymousAvatar icon="faUser" color="violet" theme="dark" />
);

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
className	string
color	"orange""yellow""lime""emerald""cyan""blue""violet""fuchsia""rose""gray"	"blue"
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
icon	"faUser""faUserAlien""faUserAstronaut""faUserChef""faUserSecret""faUserDoctorHairLong""faUserHelmetSafety""faUserTieHairLong""faUserGraduate""faUserHairBuns""faUserVneckHairLong""faUserNinja""faUserPilot""faUserShakespeare""faUserRobot""faUserCrown""faUserCowboy""faUserSlash"	"faUserAlien"
color	"orange""yellow""lime""emerald""cyan""blue""violet""fuchsia""rose""gray"	"gray"
size	"xxs""xs""sm""md""lg""xl""2xl""3xl"	"md"
theme	"light""dark"	"dark"