Component · Data display
Avatar
a user/tenant mark — image or initials — at four scales, with optional labels.
Example
Playground
variant
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <Avatar> | @design-foundry/lucent-react |
| Angular | <lucent-avatar> | @design-foundry/lucent |
| Web Components | <lucent-avatar> | @design-foundry/lucent-wc |
| Blazor | <LucentAvatar> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| name | string | — | used for initials + label. |
| src | string | — | image url (falls back to initials). |
| tenant | string | — | secondary label (md/lg). |
| scale | xs | sm | md | lg | md | size. |
| variant | trailing | leading | none | trailing | label placement. |