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

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 name, children, and fallback in that order.

#
Name

Generate initials from the name prop if src is not provided or fails to load.

Name

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

#
Children

Render children prop if src and name are not provided.

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

#
Icon

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

By default fallback is set to user.

Fallback

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. "user" \| "team" 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"
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" Default: md

#
Changelog

#
0.1.0

Added component

Autocomplete ALPHA

Badge