Avatar Variants

Usage

Gallery

Compositions of TxAvatar with TxCornerOverlay, TxOutlineBorder, and TxIcon, grouped by status, activity, platform, system, social, and context.

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/.