---
title: "Avatar Variants"
description: "Recipes that add status dots, badges, and rings to avatars."
category: Basic
status: beta
since: 1.0.0
tags: [avatar, badge, status]
syncStatus: reviewed
verified: true
---

## Usage

### Gallery
Compositions of `TxAvatar` with `TxCornerOverlay`, `TxOutlineBorder`, and `TxIcon`, grouped by status, activity, platform, system, social, and context.
:::TuffDemoWrapper{demo="AvatarVariantsAvatarVariantsGalleryDemo" code-lang="vue"}
---
code: |
  <!-- Three representative recipes; the demo source has all 30+ variants -->
  <template>
    <!-- Online status dot -->
    <TxCornerOverlay placement="bottom-right" :offset-x="-2" :offset-y="-2">
      <TxAvatar src="https://i.pravatar.cc/150?u=online" size="large" />
      <template #overlay>
        <span class="tx-avatar-variants__dot tx-avatar-variants__dot--online" />
      </template>
    </TxCornerOverlay>

    <!-- Platform badge -->
    <TxCornerOverlay placement="bottom-right" :offset-x="-4" :offset-y="-4">
      <TxAvatar size="large" background-color="var(--tx-fill-color-light)">
        <TxIcon name="i-carbon-chat" :size="24" style="color: var(--tx-color-success)" />
      </TxAvatar>
      <template #overlay>
        <span class="tx-avatar-variants__badge tx-avatar-variants__badge--light">
          <TxIcon name="i-carbon-mobile" :size="14" style="color: var(--tx-text-color-secondary)" />
        </span>
      </template>
    </TxCornerOverlay>

    <!-- Ring + verified badge -->
    <TxOutlineBorder variant="ring" :ring-width="2" ring-color="var(--tx-color-primary)" :padding="2" clip-mode="none">
      <TxCornerOverlay placement="bottom-right" :offset-x="-4" :offset-y="-4">
        <TxAvatar src="https://i.pravatar.cc/150?u=verified" size="large" />
        <template #overlay>
          <span class="tx-avatar-variants__badge tx-avatar-variants__badge--primary">
            <TxIcon name="i-carbon-checkmark-filled" :size="14" class="tx-avatar-variants__icon--white" />
          </span>
        </template>
      </TxCornerOverlay>
    </TxOutlineBorder>
  </template>
---
:::

### Best Practices

- Copy only the smallest pattern you need; don't import the whole gallery demo.
- When a badge conveys user state, state it in adjacent text or the parent control's label, not by color or icon shape alone.
- Give purely decorative badges an empty `alt` or `aria-hidden`.

## Technologies

- This page is a recipe gallery, not an exported component; the badge styles are local CSS classes in the demo.
- Source: `apps/nexus/app/components/content/demos/AvatarVariantsAvatarVariantsGalleryDemo.vue` and `AvatarVariantCard.vue`; components in `packages/tuffex/packages/components/src/avatar/`, `corner-overlay/`, and `outline-border/`.

<TuffDocSourceLink />