Components / Collections
Avatar
A person or account, with initials when there is no image.
@fabrials/ui
ALNPJ
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Avatar, AvatarImage, AvatarFallback, avatarInitials } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
size | sm | md | lg | Scale. |
avatarInitials(value, fallback?, locale?) | string | The fallback text: first letters of the first and last word of a name, or the first letter of an address. Grapheme-safe, upper-cased in the locale. |
Behavior
Decorative next to a name; give it alt text when it stands alone.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.