A rounded square with a person's initial, in three sizes.
import { Avatar } from "@meowerse/ui"; · source packages/ui/src/components/Avatar.tsx
variants and states
A
small
М
medium
C
large
props
prop
type
default
required
name
string the person's name; its first character becomes the visible initial and the whole name its
accessible name. An empty or blank name shows "?" and is named "no name".
—
yes
size
"sm" | "md" | "lg" the avatar's size.
"md"
no
decorative
boolean true when the name is already visible next to the avatar: it is then hidden from assistive tech,
so a screen reader doesn't read the name twice. Leave it false when the avatar stands alone.
false
no
className
string extra class names to append.
—
no
css custom properties
variable
dark
light
--c-accent
#00ff82
#0a6e3c
--c-surface
#151517
#dfded9
--fs-1
0.75rem
same
--fs-2
0.8125rem
same
--fs-4
1rem
same
--r-m
4px
same
Classes: .mw-avatar. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
small
tsx
import { Avatar } from "@meowerse/ui";
<Avatar name="alxnko" size="sm" />