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 |