" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;color:#393A34;background-color:#f6f8fa;font-size:85%;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border:1px solid;border-top:0;border-color:#d0d7de">
<Avatar src="https://avatars.githubusercontent.com/primer" />
<Avatar square src="https://avatars.githubusercontent.com/primer" />
Name | Type | Default | Description |
---|
alt | string | '' | Provide alt text when the avatar is used without a name next to it. |
size | number | 20 | The size of the avatar in pixels. |
square | boolean | false | If true, the avatar will be square instead of circular. |
sx | SystemStyleObject | | Style overrides to apply to the component. See also overriding styles. |
- Component props and basic example usage of the component are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component does not introduce any performance regressions.
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.