Avatar
Identity imagery with deterministic fallback content, size, and shape.
Contract
| Axis | Values | Default |
|---|---|---|
uiSize | md, lg | md |
shape | circle, square | circle |
| parts | Root, Image, Fallback | compound API |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/avatar.css';Scroll inside the code area to read long lines.
Imports
import { TRAvatar } from '@tinyrack/ui/components/avatar';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Image failure fallback permalink
Keep Fallback beside Image so a decode failure resolves to deterministic initials. This data URI reproduces the failure without making a network request.
Sizes permalink
Choose the size that matches adjacent controls and identity density.
Shapes permalink
Use circle for people and square when the identity is represented by a product or organization mark.
API
Root options
| Prop | Type | Default | Purpose |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | Sets the avatar size. |
shape | 'circle' | 'square' | 'circle' | Sets the identity silhouette. |
Image and fallback
Image forwards native image and Base UI props, including render, ref, and onLoadingStatusChange. Use meaningful alt text for identity images. Fallback appears when Image is absent or fails; keep its content short and recognizable, and set delay in milliseconds to avoid a flash while Image loads.
Composition and styling
Root forwards Base UI Root props, state-aware className and style, render, and React 19 ref. Override --tr-avatar-size, --tr-avatar-radius, --tr-avatar-background, --tr-avatar-border, --tr-avatar-color, --tr-avatar-font-size, or --tr-avatar-font-weight for component-scoped styling.