Skip to Content
ComponentsAvatar

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.

AM
"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.

AM
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.

AM
"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.

"use client"; import type { ComponentPropsWithoutRef } from "react"; import { Avatar } from "@optiaxiom/react"; export function App({ fallback = "user", }: Pick<ComponentPropsWithoutRef<typeof Avatar>, "fallback">) { return <Avatar fallback={fallback} />; }

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.

"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
Last updated on