Avatar

Avatar is an image element with a fallback for representing the user.

#
Documentation

#
Usage

Provide the src and an optional name prop to render an avatar.


import { Avatar } from "@optiaxiom/react";
 
export function App() {
  return (
    <Avatar
      name="Jane Doe"
      src="https://i.pravatar.cc/300?u=jane@doe.example"
    />
  );
}

#
Color scheme

Use the colorScheme prop to control the avatar fallback background and text colors.

KP KP


import { Avatar, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" flexWrap="wrap">
      <Avatar>KP</Avatar> {/* Neutral is default */}
      <Avatar colorScheme="purple">KP</Avatar>
    </Flex>
  );
}

#
Different sizes

Use the size prop to modify the size of the avatar.

Size


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Avatar } from "@optiaxiom/react";
 
export function App({
  size = "md",
}: Pick<ComponentPropsWithRef<typeof Avatar>, "size">) {
  return <Avatar size={size}>AM</Avatar>;
}

#
Fallback

In case src is not provided, or the browser fails to load the image, Avatar component will show a fallback instead.

The fallback renders children, name, and fallback in that order.

#
Children

Render children prop if src is not provided.


import { Avatar } from "@optiaxiom/react";
 
export function App() {
  return <Avatar>AM</Avatar>;
}

#
Name

Generate initials from the name prop if src and children are not provided or fails to load.

Name


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Avatar } from "@optiaxiom/react";
 
export function App({
  name = "Arthur Morgan",
}: Pick<ComponentPropsWithRef<typeof Avatar>, "name">) {
  return <Avatar name={name} />;
}

#
Icon

Render an icon based on fallback prop if neither src, children, and name are given or fails to load.

By default fallback is set to user.


import { Avatar, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Avatar />
      <Avatar fallback="user" />
      <Avatar fallback="team" />
      <Avatar fallback="opal" />
    </Flex>
  );
}

#
Grouping avatars

Use the <AvatarGroup /> component to stack avatars together.

JL+2


import { Avatar, AvatarGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <AvatarGroup size="sm">
      <Avatar name="John Snow" src="https://i.pravatar.cc/150?img=7">
        JS
      </Avatar>
      <Avatar name="Daenerys Targaryen" src="https://i.pravatar.cc/150?img=5">
        DT
      </Avatar>
      <Avatar name="Jamie Lannister">JL</Avatar>
      <Avatar>+2</Avatar>
    </AvatarGroup>
  );
}

#
Props

#
Avatar

Supports all Box props in addition to its own. Renders a <span> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`colorScheme` Control the avatar fallback background and text colors. `"purple" \| "neutral"` Default: `neutral`
`fallback` The fallback icon to display when no name or image is given. `"opal" \| "team" \| "user"` Default: `user`
`name` Use name to generate initials to show inside the avatar. `string`
`size` Control the size of the avatar. `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "3xl" \| "2xs"`
`src` Render the image inside the avatar. `string`

#
AvatarGroup

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`size` Control the size of the avatars. `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "3xl" \| "2xs"` Default: `md`

#
Changelog

#
0.1.0

Added component