Avatar
The Avatar component lets you show user profile images, or placeholders.
Demo
States
With an image
Naturally you're probably wanting to show a users profile image in their avatar, don't worry, we can do that. Use the src prop to specify the image URL, for example...
The image will always cover and be centered within the avatar.
Without an image
And of course, you may not always want to show an image, maybe they don't have one, or maybe they're ugly.
You can opt to pass no src and nitpick will show a default user icon instead. You can also customise this, as seen in example on the right below by using the slots prop.
Selected
If you have a screen where you want to highlight a users avatar, you can use the isSelected prop to do so.
This will draw an outline around the user and raise the avatar slightly as seen in the demo below.
Examples uses:
- Avatar selection from a list
- Highlighting a user in a list, for example, presence status
- Your own strange use case
Customising the image component
If you're using Next.js, or another framework, you will want to customise the component Nitpick uses to render your image for better performance and to achieve the perfect Lighthouse score.
Nitpick supports customisation of the img it uses underneath via the slots prop. You can see an example of this below which is tailored for Next.js.
Sizes
You can also specify the size of your avatar.
Full customisation
You're not limited to how Nitpick likes to display profile pictures, you can also use the rootClassName and componentClassName props to
deeply customise your avatar component on top of what we provide.