Skip to content
Fieldbook
Menu
Sign in
EN

Data display

Initials fallback avatar

Initials fallback avatar: A single avatar that shows a photo when given one, otherwise centers two letters of initials on a soft tinted shape.

Using Initials fallback avatar

Initials fallback avatar uses the inline preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
sizenumber40From 24 to 72; step 4
shapeselectcircleOptions: circle, rounded
accentcolor#9BE15DNo additional limit in the metadata.
labeltextFBUp to 3 characters
Which frameworks are available for Initials fallback avatar?

Initials fallback avatar is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Initials fallback avatar depend on?

The React metadata lists these npm dependencies beyond React: clsx.

What accessibility details are visible in Initials fallback avatar?

The React source for Initials fallback avatar includes: attributes and handlers (aria-hidden, aria-label); explicit roles (img). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Initials fallback avatar handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Initials fallback avatar's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Initials avatar cluster component, a Fieldbook UI component in Data display.
2369Initials avatar clusterData displayA row of round initials tokens that summarizes a group of people, ending in a muted overflow count for the rest.
Still of the Social proof avatar row component, a Fieldbook UI component in Data display.
2236Social proof avatar rowData displayA tight row of overlapping avatar circles closing with a bubble that totals everyone left out of the row.
Still of the Animated metric counter component, a Fieldbook UI component in Data display.
2299Animated metric counterData displayA large bare numeral that springs up from a starting value to its target the moment it scrolls into view, overshooting slightly before it settles, with thousands separators and an optional suffix.
Still of the Before/After Code Diff component, a Fieldbook UI component in Data display.
2113Before/After Code DiffData displayTwo code panels side by side, labeled before and after, with added and removed lines tinted and a hover focus effect.
Still of the Billing Ledger Table component, a Fieldbook UI component in Data display.
2304Billing Ledger TableData displayFilter invoice statuses, sort amounts, and recalculate the visible ledger total.
Still of the Concentric goal rings component, a Fieldbook UI component in Data display.
2128Concentric goal ringsData displayThree nested progress rings that draw themselves in sequence beside a readout of each goal's current and target value.