آواتار

<Avatar name="سپنتا پویا" src="/images/sepanta-pouya.jpg" size="lg" />
<Avatar name="سارا احمدی" size="lg" />
<Avatar name="علی رضایی" size="lg" brand />
<Avatar name="کاشی" size="lg" square />

<span role="img" aria-label="سپنتا پویا" data-tone="neutral" class="k-avatar k-avatar--lg"><img class="k-avatar__image" src="/images/sepanta-pouya.jpg" alt=""/></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="علی رضایی" data-tone="brand" class="k-avatar k-avatar--lg k-avatar--brand"><span aria-hidden="true">ع‌ر</span></span><span role="img" aria-label="کاشی" data-tone="neutral" class="k-avatar k-avatar--lg k-avatar--square"><span aria-hidden="true">ک</span></span>

<Avatar name="سارا احمدی" size="xs" />
<Avatar name="سارا احمدی" size="sm" />
<Avatar name="سارا احمدی" />
<Avatar name="سارا احمدی" size="lg" />
<Avatar name="سارا احمدی" size="xl" />
<Avatar name="سارا احمدی" size="2xl" />

<span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--xs"><span aria-hidden="true">س</span></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--sm"><span aria-hidden="true">س</span></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--xl"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="سارا احمدی" data-tone="neutral" class="k-avatar k-avatar--2xl"><span aria-hidden="true">س‌ا</span></span>

<Avatar name="سارا احمدی" status="online" size="lg" />
<Avatar name="علی رضایی" status="busy" size="lg" />
<Avatar name="مریم کریمی" status="away" size="lg" />
<Avatar name="رضا نوری" status="offline" size="lg" />

<span role="img" aria-label="سارا احمدی، آنلاین" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">س‌ا</span><span class="k-avatar__status k-avatar__status--online" aria-hidden="true"></span></span><span role="img" aria-label="علی رضایی، مشغول" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">ع‌ر</span><span class="k-avatar__status k-avatar__status--busy" aria-hidden="true"></span></span><span role="img" aria-label="مریم کریمی، غایب" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">م‌ک</span><span class="k-avatar__status k-avatar__status--away" aria-hidden="true"></span></span><span role="img" aria-label="رضا نوری، آفلاین" data-tone="neutral" class="k-avatar k-avatar--lg"><span aria-hidden="true">ر‌ن</span><span class="k-avatar__status k-avatar__status--offline" aria-hidden="true"></span></span>

<AvatarGroup max={4} aria-label="اعضای تیم">
<Avatar name="سپنتا پویا" src="/images/sepanta-pouya.jpg" />
<Avatar name="سارا احمدی" brand />
<Avatar name="علی رضایی" />
<Avatar name="مریم کریمی" brand />
<Avatar name="رضا نوری" />
<Avatar name="نگار صادقی" />
</AvatarGroup>

<div role="group" class="k-avatar-group" aria-label="اعضای تیم"><span role="img" aria-label="سپنتا پویا" data-tone="neutral" class="k-avatar"><img class="k-avatar__image" src="/images/sepanta-pouya.jpg" alt=""/></span><span role="img" aria-label="سارا احمدی" data-tone="brand" class="k-avatar k-avatar--brand"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="علی رضایی" data-tone="neutral" class="k-avatar"><span aria-hidden="true">ع‌ر</span></span><span role="img" aria-label="مریم کریمی" data-tone="brand" class="k-avatar k-avatar--brand"><span aria-hidden="true">م‌ک</span></span><span role="img" aria-label="۲ نفر دیگر" class="k-avatar"><span aria-hidden="true">+۲</span></span></div>

{members.map((m) => <Avatar key={m.id} name={m.name} color="auto" size="lg" />)}

<div style="display:flex;flex-wrap:wrap;gap:12px"><span role="img" aria-label="سارا احمدی" data-tone="warning" class="k-avatar k-avatar--lg k-avatar--warning"><span aria-hidden="true">س‌ا</span></span><span role="img" aria-label="علی رضایی" data-tone="warning" class="k-avatar k-avatar--lg k-avatar--warning"><span aria-hidden="true">ع‌ر</span></span><span role="img" aria-label="مریم کریمی" data-tone="brand" class="k-avatar k-avatar--lg k-avatar--brand"><span aria-hidden="true">م‌ک</span></span><span role="img" aria-label="رضا نوری" data-tone="error" class="k-avatar k-avatar--lg k-avatar--error"><span aria-hidden="true">ر‌ن</span></span><span role="img" aria-label="نگار صادقی" data-tone="brand" class="k-avatar k-avatar--lg k-avatar--brand"><span aria-hidden="true">ن‌ص</span></span><span role="img" aria-label="امیر حسینی" data-tone="brand" class="k-avatar k-avatar--lg k-avatar--brand"><span aria-hidden="true">ا‌ح</span></span><span role="img" aria-label="زهرا موسوی" data-tone="error" class="k-avatar k-avatar--lg k-avatar--error"><span aria-hidden="true">ز‌م</span></span></div>