Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/avatar.tsx@viliha/vui-react/avatarThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@viliha/vui-react/avatar";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Avatar | component | — |
| AvatarImage | component | — |
| AvatarFallback | component | — |
Avatar props
Plus everything React.HTMLAttributes<HTMLDivElement> accepts, passed straight through to the underlying element.
| Prop | Type | Default | What it does |
|---|---|---|---|
| size? | AvatarSize | — | One of six steps. Omit to keep the 32px default, or keep passing a `size-*` class. |
| status? | AvatarStatus | — | Presence, drawn as a dot on the lower-right corner and scaled to `size`. |
| statusLabel? | string | — | What the dot means, for anyone who cannot see it. A coloured dot is pure decoration to a screen reader, and "online" is not decoration. |
AvatarImage props
It takes no props of its own. Everything you pass reaches the underlying React.ImgHTMLAttributes<HTMLImageElement> primitive, so every attribute it accepts works here unchanged and nothing is invented on top.
AvatarFallback props
It takes no props of its own. Everything you pass reaches the underlying React.HTMLAttributes<HTMLDivElement> primitive, so every attribute it accepts works here unchanged and nothing is invented on top.
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.