Avatar

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

01 Hero Preview

Grid: 8px · Scale: 1:1

SC 4

JR @

02 Usage

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>

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

Fallbacks

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

Component Sheet

Grid: 8px · Scale: 1:1

JR @

Sizes

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

Component Sheet

Grid: 8px · Scale: 1:1

Badges

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

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

JR +3

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

Component Sheet

Grid: 8px · Scale: 1:1

NS 2

JR +1

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

SC 4

NS +2

06 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: var(--frame-radius-full);
  --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: var(--frame-radius-full);
  --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);