K
KoreUI

Avatar

UI

Avatar con imagen, iniciales auto-generadas, icono fallback, indicador de presencia y grupos.

Uso básico

Prioridad de render: imagen > iniciales > icono fallback.

Juan Pérez
MG
<x-kore::avatar src="https://i.pravatar.cc/150?u=1" name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar />
<x-kore::avatar src="https://i.pravatar.cc/150?u=1" name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar />

Tamaños

Cinco tamaños disponibles: xs, sm, md (default), lg, xl.

A
A
A
A
A
<x-kore::avatar name="AB" size="xs" />
<x-kore::avatar name="AB" size="sm" />
<x-kore::avatar name="AB" size="md" />
<x-kore::avatar name="AB" size="lg" />
<x-kore::avatar name="AB" size="xl" />
<x-kore::avatar name="AB" size="xs" />
<x-kore::avatar name="AB" size="sm" />
<x-kore::avatar name="AB" size="md" />
<x-kore::avatar name="AB" size="lg" />
<x-kore::avatar name="AB" size="xl" />

Con imagen

Cuando se proporciona src, se muestra la imagen.

Ana López
Carlos Ruiz
<x-kore::avatar src="https://i.pravatar.cc/150?u=2" name="Ana López" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=3" name="Carlos Ruiz" size="lg" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=2" name="Ana López" />
<x-kore::avatar src="https://i.pravatar.cc/150?u=3" name="Carlos Ruiz" size="lg" />

Iniciales

Sin imagen, se generan iniciales automáticamente a partir del nombre.

JP
MG
P
<x-kore::avatar name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar name="Pedro" />
<x-kore::avatar name="Juan Pérez" />
<x-kore::avatar name="María García" />
<x-kore::avatar name="Pedro" />

Formas

Forma circular (default) o cuadrada.

C
S
<x-kore::avatar name="Circle" shape="circle" />
<x-kore::avatar name="Square" shape="square" />
<x-kore::avatar name="Circle" shape="circle" />
<x-kore::avatar name="Square" shape="square" />

Presencia

Indicador de estado: online, offline, busy, away.

J
M
P
A
<x-kore::avatar name="Juan" presence="online" />
<x-kore::avatar name="María" presence="busy" />
<x-kore::avatar name="Pedro" presence="away" />
<x-kore::avatar name="Ana" presence="offline" />
<x-kore::avatar name="Juan" presence="online" />
<x-kore::avatar name="María" presence="busy" />
<x-kore::avatar name="Pedro" presence="away" />
<x-kore::avatar name="Ana" presence="offline" />

Avatar Group

Agrupa avatares con solapamiento y slot de overflow.

User 1
User 2
U3
+
<x-kore::avatar-group>
    <x-kore::avatar src="https://i.pravatar.cc/150?u=10" name="User 1" />
    <x-kore::avatar src="https://i.pravatar.cc/150?u=11" name="User 2" />
    <x-kore::avatar name="User 3" />
    <x-slot:overflow>
        <x-kore::avatar name="+5" />
    </x-slot:overflow>
</x-kore::avatar-group>
<x-kore::avatar-group>
    <x-kore::avatar src="https://i.pravatar.cc/150?u=10" name="User 1" />
    <x-kore::avatar src="https://i.pravatar.cc/150?u=11" name="User 2" />
    <x-kore::avatar name="User 3" />
    <x-slot:overflow>
        <x-kore::avatar name="+5" />
    </x-slot:overflow>
</x-kore::avatar-group>

Props

Prop Tipo Default Descripción
src string|null null URL de imagen
name string|null null Nombre (genera iniciales)
icon string user Icono Lucide fallback
size string md Tamaño: xs, sm, md, lg, xl
shape string circle Forma: circle, square
presence string|null null Indicador: online, offline, busy, away
presencePulse bool false Animación pulse en online