Logo

Avatar

Identity visuals with image, fallback, badge, and grouping patterns.

Preview

Sarah Chen SC 4 Maya Torres MT Jordan Reed JR @

Usage

TS 

import { FrAvatarModule } from '@frame-ui-ng/components/avatar';

HTML 

<span frAvatar size="md">
  <img frAvatarImage src="data:image/svg+xml;utf8,..." alt="Sarah Chen" />
  <span frAvatarFallback>SC</span>
</span>

Examples

Basic

Use an image with a fallback so the avatar still renders meaningful identity when the image is missing or fails.

Sarah Chen SC

Fallbacks

Fallback initials and icon-only avatars cover broken images, generic accounts, and not-yet-uploaded profiles.

Jordan Reed JR @

Sizes

Choose from `xs`, `sm`, `md`, and `lg` to match dense lists, cards, or larger profile surfaces.

Sarah Chen SC Maya Torres MT Jordan Reed JR Nina Shah NS

Badges

Badges work well for unread counts, online markers, or lightweight secondary status attached to a person.

Maya Torres MT 9

Groups

Group avatars when several people share ownership of a task, thread, or document, and expand them on hover when overlap should relax.

Sarah Chen SC Maya Torres MT Jordan Reed JR +3

Custom Styling

Override avatar tokens on a local wrapper when a specific product area needs different radii, badge treatments, or grouping density while keeping the same markup and behaviors.

Nina Shah NS 2
Sarah Chen SC Jordan Reed JR +1

Token Inspector

Hover the avatar shell, image, fallback, badge, or group count to inspect the tokens that control sizing, surfaces, overlays, and overlap behavior. Click a region to pin the inspector while you review the current values.

Sarah Chen SC 4 Jordan Reed JR
Maya Torres MT Nina Shah NS +2

Design Tokens

Use these CSS custom properties to tune avatar sizing, fallback spacing, badge styling, and group overlap without changing the component markup.

SCSS 


  --frame-avatar-root-size: 2.5rem;
  --frame-avatar-root-radius: 999px;
  --frame-avatar-root-bg: var(--frame-muted);
  --frame-avatar-root-border: transparent;
  --frame-avatar-root-color: var(--frame-muted-foreground);
  --frame-avatar-root-font-size: 0.875rem;
  --frame-avatar-root-font-weight: 600;
  --frame-avatar-root-shadow: none;
  --frame-avatar-size-xs: 1.5rem;
  --frame-avatar-size-sm: 2rem;
  --frame-avatar-size-md: 2.5rem;
  --frame-avatar-size-lg: 3.5rem;
  --frame-avatar-font-size-xs: 0.5rem;
  --frame-avatar-font-size-sm: 0.75rem;
  --frame-avatar-font-size-md: 0.875rem;
  --frame-avatar-font-size-lg: 1rem;
  --frame-avatar-image-fit: cover;
  --frame-avatar-fallback-padding: 0.25rem;
  --frame-avatar-icon-size: 1rem;
  --frame-avatar-badge-size: 0.875rem;
  --frame-avatar-badge-radius: 999px;
  --frame-avatar-badge-bg: var(--frame-primary);
  --frame-avatar-badge-border: var(--frame-surface);
  --frame-avatar-badge-color: var(--frame-primary-foreground);
  --frame-avatar-badge-font-size: 0.625rem;
  --frame-avatar-badge-font-weight: 700;
  --frame-avatar-group-overlap: 0.625rem;
  --frame-avatar-group-transition-duration: 180ms;
  --frame-avatar-group-transition-timing: ease;
  --frame-avatar-group-count-bg: var(--frame-surface);
  --frame-avatar-group-count-border: var(--frame-border);
  --frame-avatar-group-count-color: var(--frame-muted-foreground);