Avatar

An image element with a fallback for representing the user.

Méschac Irung
MI
MI
 
<div class="flex gap-3">
    <div class="avatar sz-md">
        <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
    </div>
    <div class="avatar sz-md fallback-solid intent-primary">MI</div>
    <div class="avatar sz-md fallback-soft intent-primary">MI</div>
</div>

Reference

Avatar

The avatar component have the following props

Prop
Type
Usage
size
enum
sz-[size]
status
enum
status-[status]
fallbackVariant
enum
fallback-[variant]
fallback-intent
enum
intent-[intent]

Status example

Méschac Irung
Méschac Irung
Méschac Irung
Méschac Irung
Méschac Irung
Méschac Irung
Méschac Irung
Méschac Irung
 
<div class="space-y-3">
    <div class="flex gap-3" data-shade="900">
        <div class="avatar sz-md avatar-status status-online">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-offline">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-away">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-busy">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
    </div>
    <div class="flex gap-3" data-shade="900">
        <div class="avatar sz-md avatar-status status-online before:bottom-0">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-offline before:bottom-0">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-away before:bottom-0">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
        <div class="avatar sz-md avatar-status status-busy before:bottom-0">
            <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
        </div>
    </div>
</div>