Avatar

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

#
Documentation

#
Usage

KDJL+2NS

import { Avatar, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" gap="10">
      <Avatar
        name="John Snow"
        size="5xl"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
      >
        JS
      </Avatar>
      <Avatar
        name="Daenerys Targaryen"
        size="xl"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
      >
        DT
      </Avatar>
      <Avatar name="Khal Drogo" size="lg">
        KD
      </Avatar>
      <Avatar name="Jamie Lannister" size="md">
        JL
      </Avatar>
      <Avatar size="sm">+2</Avatar>
      <Avatar name="Ned Stark" size="xs">
        NS
      </Avatar>
    </Flex>
  );
}

#
Fallback

#
How is fallback determined

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

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

If none of these are provided a generic user icon will be shown instead.

#
Icon

Render the icon prop if src is not given or fails to load.

import { Avatar } from "@optiaxiom/react";
import { IconUser } from "@tabler/icons-react";
 
export function App() {
  return <Avatar colorScheme="blue" icon={<IconUser />} name="Arthur Morgan" />;
}

#
Name

Generate initials from the name prop if src and icon are not provided.

import { Avatar } from "@optiaxiom/react";
 
export function App() {
  return <Avatar colorScheme="blue" name="Arthur Morgan" />;
}

#
Children

Render children as-is if neither src, icon, and name are provided.

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

#
Colors

#
Color scheme

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

KP KPKPKPKPKPKPKPKPKPKPKP

import { Avatar, Flex } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" flexWrap="wrap">
      <Avatar>KP</Avatar> {/* Neutral is default */}
      <Avatar colorScheme="red">KP</Avatar>
      <Avatar colorScheme="blue">KP</Avatar>
      <Avatar colorScheme="green">KP</Avatar>
      <Avatar colorScheme="yellow">KP</Avatar>
      <Avatar colorScheme="orange">KP</Avatar>
      <Avatar colorScheme="magenta">KP</Avatar>
      <Avatar colorScheme="gray">KP</Avatar>
      <Avatar colorScheme="slate">KP</Avatar>
      <Avatar colorScheme="purple">KP</Avatar>
      <Avatar colorScheme="brand">KP</Avatar>
      <Avatar colorScheme="dark">KP</Avatar>
    </Flex>
  );
}

#
Groups

#
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://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
      >
        JS
      </Avatar>
      <Avatar
        name="Daenerys Targaryen"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
      >
        DT
      </Avatar>
      <Avatar name="Jamie Lannister">JL</Avatar>
      <Avatar>+2</Avatar>
    </AvatarGroup>
  );
}

#
Props

#
`Avatar`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
colorScheme	`"blue" \| "gray" \| "green" \| "magenta" \| "orange" \| "purple" \| "red" \| "yellow" \| "dark" \| "neutral" \| "brand" \| "slate"` = `"neutral"`
icon	`ReactNode`
name	`string`
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "5xl"`
src	`string`

#
`AvatarGroup`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "5xl"` = `"md"`

#
Changelog

#
0.1.0

Added component

Accordion Indicator