Demo
Display variants
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.
Example uses:
- Avatar selection from a list
- Highlighting a user in a list, for example, presence status
- Your own strange use case
Gems
You can add gems to the avatar in all corners, sides, centre, etc. and more than one just as easily.
Example uses:
- Presence indicators
- Status indicators (raised hands, etc.)
- Positioning any element onto the avatar
The gems interface is very flexible, have a look at some of the more simple examples below.
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.
Stacks
If you have multiple avatars to stack on top of each other you can wrap them in an <AvatarStack>
component to get layering. This affects the root avatar component and leaves gems alone.
My advice would be to avoid complex gem placement on avatar stacks so as to avoid confusion.
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.
