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 | enum number | 025 | 050 | 075 | 087 | 100 | 125 | 150 | 175 | 200 | 225 | 250 | 275 | 300 | 350 | 400 | 450 | 500 | 200 | False |
| asChild | enum 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?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |