Avatar
An image or initials. Circles for people, squares for organizations and albums.
import Avatar from "swshd/Avatar";Avatar identifies a person or entity: an image when there is one, initials otherwise, in a fixed box. Reach for it in sidebar switchers, menu rows, and member lists.
Don't use it as a generic rounded image — that is Image with a radius token.
Every size carries a box, its square's corner token, and the mono label variant the initials render in — so a 60 px avatar in a menu and a 24 px one in a dense list read as one family.
Circle is for people; square — at the size's corner token — is for organizations and albums. The default shape is circle.
imageUrl replaces the initials; without it, getInitials takes the first letters of the name — getInitials("Riverside Athletics") is RA, getInitials("northwind festival") is NF, and getInitials("SWSH") is S. The fallback paints with AVATAR_TOKENS: a raised fill and primary ink.
import Avatar from "swshd/Avatar";
import type { AvatarProps, AvatarSize } from "swshd/Avatar";
<Avatar name="Riverside Athletics" imageUrl={thumbnailUrl} size={32} shape="square" />The avatar is an image named by name. When the row it sits in already names the entity — like a member list — pass decorative so the name is not announced twice.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Accessible name and the source of the initials. |
imageUrl | string | — | When set, the image replaces the initials. |
size | 24 | 32 | 40 | 60 | 32 | Box, corner, and initials variant, from AVATAR_SIZES. |
shape | "circle" | "square" | "circle" | Circle for people; square (the size's corner token) for entities. |
decorative | boolean | false | Hidden from assistive technology — use when the row already names the entity. |
style | StyleProp<ViewStyle> | — | Layout only (margins, alignment); the box comes from size. |
testID | string | — | data-testid on web. |