Avatar

Les Avatars sont des espaces réservés visuels pour représenter des utilisateurs ou des entités. Ils peuvent contenir des images ou des initiales et sont couramment utilisés dans les en-têtes, les listes et partout où les informations utilisateur sont présentées.

Avatar avec image

La prop src spécifie l’URL de l’image pour l’avatar.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function AvatarImageDemo() {
    return (
        <Avatar
            src="https://avatars.githubusercontent.com/u/5120271?v=4"
            alt="User Name"
        />
    );
}

Avatar avec texte

Quand la prop src n’est pas fournie, l’avatar peut afficher du texte comme les initiales de l’utilisateur.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function AvatarTextDemo() {
    return (
        <Avatar>
            AB
        </Avatar>
    );
}

Style personnalisé

La prop className vous permet de passer des classes CSS personnalisées au composant avatar.

import React from "react";
import { Avatar } from "@firecms/ui";

export default function CustomStyleAvatarDemo() {
    return (
        <Avatar
            className="bg-red-500 dark:bg-red-700"
            // Example of custom size
            style={{ width: '80px', height: '80px' }}
        >
            CD
        </Avatar>
    );
}