Avatar

An image element with a fallback for representing the user.

Méschac Irung
M
N
 
<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-neutral">M</div>
  <div class="avatar sz-md fallback-primary">N</div>
</div>

Reference

Avatar

The avatar component have the following props

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

Status

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>

Sizes

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="flex flex-wrap items-end gap-3" data-shade="900">
  <div class="avatar sz-xxs">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-xs">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-sm">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-md">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-lg">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-xl">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-xxl">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-xxxl">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
</div>

Stacked

Méschac Irung
Bernard Ngandu
Théo Balick
Glodie Lukose
 
<div class="flex -space-x-2" data-shade="925">
  <div class="avatar sz-sm border-2 border-[--ui-bg]">
      <img src={MESCHAC_AVATAR} alt="Méschac Irung" width="" height="" />
  </div>
  <div class="avatar sz-sm border-2 border-[--ui-bg]">
      <img src={BERNARD_AVATAR} alt="Bernard Ngandu" width="" height="" />
  </div>
  <div class="avatar sz-sm border-2 border-[--ui-bg]">
      <img src={THEO_AVATAR} alt="Théo Balick" width="" height="" />
  </div>
  <div class="avatar sz-sm border-2 border-[--ui-bg]">
      <img src={GLODIE_AVATAR} alt="Glodie Lukose" width="" height="" />
  </div>
</div>