Avatar
A compact visual identifier for a person, team or project. It falls back to initials rather than a generic silhouette, so a row of avatars stays distinguishable even when no one has uploaded a photo.
Added in v1.0.0 · import from "@borneo/react"
Interactive previewPermalink to this section
No image is loaded here, so every avatar shows its initials fallback — the state most products spend most of their time in.
Size
Shape
Presence
avatar-preview.tsx
<Avatar
name="Ana Prasetyo"
src="/avatars/ana.jpg"
size="md"
/>AnatomyPermalink to this section
Ana Prasetyo is online
SizesPermalink to this section
Five steps. Extra small belongs in table rows, extra large on profile pages.
xs
sm
md
lg
xl
Variants and statesPermalink to this section
Initials
Default fallback
Square
Teams and projects
Bimo Santoso is online
Online
Citra Lestari is away
Away
Dimas Wibowo is offline
Offline
Single name
One initial
Broken image
Falls back silently
In a group
GroupsPermalink to this section
Overlapping avatars show who is involved without listing everyone. Past the limit, the remainder becomes a count.
+2 more
+3 more