Avatar
A round badge for a user, showing initials or an image, with color token support.
JD
Usage
import { Avatar } from 'trivela-ui';
export function Example() {
return <Avatar>JD</Avatar>;
}Examples
Initials
Children render centred, so pass one or two letters for a text avatar.
JD
AS
MK
Colors
The color token sets the background. Text stays white at every scale.
P
S
S
W
D
I
N
Sizes
The base size is h-10 w-10. Override it with className for anything else.
SM
MD
LG
With image
Pass an img as the child and let it fill the circle with object-cover.
JD
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'primary' | Color scale used by the component. |
| size | 'sm' | 'md' | 'lg' | 'md' | Diameter and text size. |
| className | string | — | Merged with the generated classes via cn(). |
| ...props | HTMLAttributes<HTMLDivElement> | — | All native attributes are forwarded to the root element. |