Anatomy
Note: Image is not to scale
- Image container
Options
Size
Avatar supports any size token. The default size token is 200.
Guidance
Supports only 1:1 image ratios
Images set to the height and clipped in a round container. When images are not in a 1:1 aspect they will be distorted.
Recommended spacing
When inline, Avatars should maintain at least the recommended spacing
Accessibility
Avatars should always include alt text of the image.
API Reference
Avatar
Prop | Description | Type | Default | Required |
---|---|---|---|---|
size | Sizes - supports any size token | number | "100" | "125" | "150" | "175" | "200" | "225" | "250" | "275" | "300" | "350" | "400" | "450" | "500" | "075" | "087" | "025" | "050" | ({ "@sm"?: number | "100" | "125" | "150" | ... 13 more ... | "050"; ... 23 more ...; "@initial"?: number | ... 16 more ... | "050"; } & { ...; }) | SizeToken | 200 | False |
asChild | boolean | ---- | False | |
css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: AlignContent | Globals | ScaleValue | Index; alignItems?: AlignItems | Globals | ScaleValue | Index; ... 426 more ...; vectorEffect?: VectorEffect | ... 2 more ... | Index; } & ... 7 more ... & { ...; } | ---- | False |