Avatars

The Avatar component in Electrik Slate UI is a versatile and customizable element that allows users to display profile pictures, initials, or status indicators. It supports various features like dark mode, customizable sizes, rounded corners, and outlined styles.

The following example demonstrates a simple avatar with an image and default size:

Toggle Dark Mode

Copy

<x-slate::avatar src="https://picsum.photos/id/237/200/300" alt="User Profile" />

This example shows how to display initials inside an avatar when no image is provided:

<x-slate::avatar initials="JD" color="primary" />

You can create rounded and outlined avatars using the rounded and outlined props:

<x-slate::avatar initials="JD" color="secondary" rounded outlined />

This example shows how to add a status indicator to an avatar:

Toggle Dark Mode

Copy

<x-slate::avatar src="https://picsum.photos/id/237/200/300" alt="User Profile" status="online" />

This example showcases avatars using explicit black and white modes, which adapt correctly to dark mode:

<x-slate::avatar initials="AB" color="black" size="lg" />
<x-slate::avatar initials="CD" color="white" size="lg" outlined />

You can control the size of the avatar using the size prop:

<x-slate::avatar initials="SM" color="success" size="sm" />
<x-slate::avatar initials="MD" color="info" size="md" />
<x-slate::avatar initials="LG" color="warning" size="lg" />
<x-slate::avatar initials="XL" color="danger" size="xl" />

The Avatar component is highly customizable, allowing you to control its appearance and behavior to fit the needs of your application. Whether you need a simple profile picture, a placeholder with initials, or a status indicator, the Avatar component can accommodate your design requirements.