Avatar | Arbol UI

Language

Appearance

People

import { Avatar } from '@arbol-ai/ui';

const PICTURE =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230d8273'/%3E%3Ccircle cx='16' cy='13' r='6' fill='%23f2faf8'/%3E%3Cpath d='M5 32c1-7 6-11 11-11s10 4 11 11z' fill='%23f2faf8'/%3E%3C/svg%3E";

<ul className="space-y-3 text-sm">
  <li className="flex items-center gap-2.5">
    <Avatar name="Dra. Gloria Londoño" />
    Dra. Gloria Londoño
  </li>
  <li className="flex items-center gap-2.5">
    <Avatar name="Andrés Felipe Rojas" src={PICTURE} />
    Andrés Felipe Rojas
  </li>
  <li className="flex items-center gap-2.5">
    <Avatar name="Marta Ruiz" src="data:image/png;base64,AAAA" />
    Marta Ruiz (her picture failed to load)
  </li>
</ul>

Sizes

import { Avatar } from '@arbol-ai/ui';

<div className="flex items-end gap-3">
  <Avatar name="Ana Gómez" size="xs" />
  <Avatar name="Ana Gómez" size="sm" />
  <Avatar name="Ana Gómez" />
  <Avatar name="Ana Gómez" size="lg" />
  <Avatar name="Ana Gómez" size="xl" />
  <span className="sr-only">Ana Gómez</span>
</div>

Organizations

A square avatar shows the whole logo; an icon stands in while there is none.

Clínica Norte

import { BuildingsIcon } from '@phosphor-icons/react';
import { Avatar } from '@arbol-ai/ui';

<div className="flex items-center gap-2.5 text-sm">
  <Avatar icon={<BuildingsIcon />} name="Clínica Norte" shape="square" size="lg" />
  Clínica Norte
</div>

Source

The examples above are src/components/avatar/avatar.examples.tsx, which the library’s tests render too.