Use src for an image and name for initials. If the image fails, the component falls back to initials; changing src to another URL retries the image. alt takes precedence over name for the accessible name. size and shape set the geometry; color applies to the initials fallback. status adds a decorative presence dot, not a textual status.
The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.
Supply name or alt when the avatar communicates identity. Without either, the avatar is hidden from assistive technology. Presence dots are decorative: communicate availability in adjacent text, as the examples do. For a decorative image beside a complete visible name, avoid announcing the same identity repeatedly in your layout.
Key
Action
—
No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.
All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.
Inputs
Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.
Name
Type
Default
Template binding
Description
alt
string
''
[alt]
Accessible name override, taking precedence over name.
Decorative presence indicator; supply meaningful status text separately.
Templates
ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.
This component does not expose content projection or public customization templates.
Public Types
Open a type to inspect its definition and interface fields.
NeuAvatarColor.d.ts
import type { NeuAvatarColor } from '@neural-ui/core/avatar';
// Public declaration (reference only)
export type NeuAvatarColor = 'blue' | 'violet' | 'green' | 'amber' | 'red' | 'slate';
NeuAvatarShape.d.ts
import type { NeuAvatarShape } from '@neural-ui/core/avatar';
// Public declaration (reference only)
export type NeuAvatarShape = 'circle' | 'square';
NeuAvatarSize.d.ts
import type { NeuAvatarSize } from '@neural-ui/core/avatar';
// Public declaration (reference only)
export type NeuAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
NeuAvatarStatus.d.ts
import type { NeuAvatarStatus } from '@neural-ui/core/avatar';
// Public declaration (reference only)
export type NeuAvatarStatus = 'online' | 'offline' | 'busy' | 'away' | '';
Sizes range from 24 to 64 px. circle clips the image to a circle; square uses the public radius token. The six initials colors are component palette choices, not configurable arbitrary CSS color values. Presence follows semantic status tokens.
Specific tokens
This component uses shared theme tokens rather than dedicated component hooks.
Shared tokens used
Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.
Token
Purpose here
Other impact
Default / fallback
--neu-error
Invalid field or danger-action color
Shared by other Core consumers; scope the override.
#dc2626
--neu-radius
Control corner radius
Shared by other Core consumers; scope the override.
8px
--neu-surface
Main field, header or control surface
Shared by other Core consumers; scope the override.
#ffffff
--neu-surface-2
Secondary surfaces and alternating rows
Shared by other Core consumers; scope the override.
#f1f5f9
--neu-text-disabled
Text of disabled controls
Shared by other Core consumers; scope the override.
#64748b
--neu-text-muted
Secondary labels and supporting content
Shared by other Core consumers; scope the override.
#475569
--neu-font-sans
Text typography
Shared by other Core consumers; scope the override.
