Avatar

Usage

Para obtener un avatar, solo debes pasarle el nombre de la persona y el componente se encargará de generar las iniciales.

With image

Si deseas mostrar una imagen en el avatar, solo debes pasarle la url de la imagen. El componente se encargará de mostrar la imagen, en caso de no tener la prop src mostrará las iniciales.

Sizes

Custom size

<Avatar name="Frank Esteban" style="width: 100px; height: 100px; font-size: 40px;" />

Status

<Avatar size="xl" name="Frank Esteban" status="online" />

<Avatar size="xl" name="Frank Esteban" status="online" src="https://avatars.githubusercontent.com/u/35234895?v=4"/>

Group

<div class="flex items-center justify-start -space-x-1.5">
  <Avatar 
    size="md" 
    name="Frank Esteban" 
    src="https://avatars.githubusercontent.com/u/35234895?v=4"
    class="ring-2 ring-white dark:ring-gray-800"
  />
  <Avatar 
    size="md" 
    name="Frank Esteban" 
    src="https://avatars.githubusercontent.com/u/35234895?v=4"
    class="ring-2 ring-white dark:ring-gray-800"
  />
</div>

Props

Prop	Type	default	Description
name	String	-	Nombre de la persona
src	String	-	Url de la imagen
size	String	md	Tamaño del avatar. Los tamaños disponibles son: xs, sm, md, lg, xl, 2xl, 3xl, 4xl y 5xl.
status	String	-	Estado del avatar. Los estados disponibles son: online, offline, busy, away e invisible.
class	String	-	Clases personalizadas