zynactradocs

Avatar

A person or team, as an image with initials as the fallback.

CNCNRWJD

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@zynactra/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Sizes are sm, default and lg. AvatarBadge adds a status dot; color it with a status token (bg-success, bg-warning).

Examples

Group

RWJDAPMS
+3

Guidelines

  • Always give a fallback: two initials, uppercase. Images fail.
  • Corner shape follows the theme: square in Zynactra, round elsewhere. Don't force it with rounded-*.
  • In a group, show at most four and count the rest with AvatarGroupCount.
  • Never brand on an avatar: it's identity, not an action.

API reference

Behaviour and props come from Base UI. See the Base UI Avatar docs.

Edit on GitHub

Attachment

A file in a composer or message, with its upload state and actions.

Badge

Short status and metadata labels, set in mono capitals.

On this page

UsageExamplesGroupGuidelinesAPI reference