Glowup
DATA DISPLAY · 45 / 89
Avatar
Avatar — a Material You data display component for React Native and web.
packages/ui/src/components/Avatar.tsx
Live demo
360
720
Full
Properties
5 controls
Name
Size
Status
None
Fallback icon
Variant
Circular
Usage
Avatar.tsx
<
Avatar
/>
Variants
The states and shapes this component is meant to be used in.
Sizes
AL
GH
AT
KJ
Variants
AL
circular
GH
rounded
AT
square
Statuses
AL
online
GH
busy
AT
away
KJ
offline
Fallbacks
MC
initials
default icon
icon
DO
custom colors
Team roster
AL
Ada Lovelace
Engineering lead
GH
Grace Hopper
Platform architect
KJ
Katherine Johnson
Data science
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
9 on AvatarProps
Filter props
backgroundColor
string
icon
MaterialCommunityIconsGlyphs
default: "account"
name
string
onPress
() => void
size
number
default: 40
source
ImageSourcePropType
status
"online" | "offline" | "busy" | "away" | null
textColor
string
variant
"circular" | "rounded" | "square"
default: "circular"
Shape: full circle, rounded corners, or square.
Previous
HelperText
Next
Badge