Pillar UI React Avatar Component documentation
Personalize user experiences with Pillar UI's Avatar component. Easily create customizable avatars for your React applications, featuring initials, images, status indicators, and more.
Components:
Type
import
import { Pillar UI React Avatar Component } from '@pillar-ui/core'
Usage
import { Avatar } from '@pillar-ui/core'
function(){
return(
<Avatar
color="suc"
size="md"
corner="rounded"
title="Success!"
message="Your action was successful."
variant="filled"
inline={false}
icon={<CheckCircleIcon />}
closable={true}
/>
;
)
}
Props
Example:
Props
The Avatar component accepts the following props:
Title
An optional title to display as an alt to make the avatar accessible.
Example usage:
function AvatarColors() {
return (
<>
<Avatar title="John Doe" />
<Avatar color="dan" title="John Doe" />
<Avatar color="suc" title="John Doe" />
<Avatar color="war" title="John Doe" />
<Avatar color="sec" title="John Doe" />
<Avatar color="pri" title="John Doe" />
<Avatar color="bg" title="John Doe" />
<Avatar color="opa" title="John Doe" />
</>
)
}
Image
The image source to display in the avatar.
Example:
function AvatarImage() {
return (
<>
<Avatar image="https://picsum.photos/id/120/100/100" />
<Avatar image="/image/user.png" />
<Avatar image="/image/user.svg" />
// If no image Provided it show a fallback image
<Avatar />
</>
)
}
Icon
The icon prop allows you to display an icon alongside the Avatar. It accepts any ReactNode. If not provided, no icon will be displayed.
Example usage:
<Avatar icon={<CheckCircleIcon />} title="Success!" />
Size
- Type: string
- Default:
md
- Options:
2xs
|xs
|sm
|md
|lg
|xl
|2xl
The size prop determines the size of the Avatar. It accepts any of the Size types defined in your library, including (3xs, 2xs,xs, sm, md, and lg, xl, 2xl, 3xl). If not provided, it defaults to the md size.
Example usage:
function AlerSizes() {
return (
<>
<Avatar image="https://picsum.photos/id/120/100/100" size="3xs" />
<Avatar image="https://picsum.photos/id/120/100/100" size="2xs" />
<Avatar image="https://picsum.photos/id/120/100/100" size="xs" />
<Avatar image="https://picsum.photos/id/120/100/100" size="md" />
<Avatar image="https://picsum.photos/id/120/100/100" size="lg" />
<Avatar image="https://picsum.photos/id/120/100/100" size="xl" />
<Avatar image="https://picsum.photos/id/120/100/100" size="2xl" />
<Avatar image="https://picsum.photos/id/120/100/100" size="3xl" />
</>
)
}
Corner
Type: string
Default: md
Options: sharp
| xs
| sm
| md
| lg
| circle
| full
The size prop determines the size of the Alert. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.
The corner prop determines the border radius of the Avatar. It accepts any of the Corner types defined in your library, including (square, xs, sm, md, xl, full, circle), and pill. If not provided, it defaults to the square corner.
Example usage:
function AlerCorners() {
return (
<>
<Flex gap="xs" items="center">
<Avatar corner="sharp" title="Hello" />
<Avatar corner="xs" title="Hello" />
<Avatar corner="sm" title="Hello" />
<Avatar corner="md" title="Hello" />
<Avatar corner="lg" title="Hello" />
<Avatar corner="xl" title="Hello" />
<Avatar corner="full" title="Hello" />
<Avatar corner="blob-1" title="Hello" />
<Avatar corner="blob-2" title="Hello" />
<Avatar corner="blob-3" title="Hello" />
<Avatar corner="blob-4" title="Hello" />
<Avatar corner="blob-5" title="Hello" />
<Avatar corner="hand-1" title="Hello" />
<Avatar corner="hand-2" title="Hello" />
<Avatar corner="hand-3" title="Hello" />
<Avatar corner="hand-4" title="Hello" />
<Avatar corner="hand-5" title="Hello" />
<Avatar corner="hand-6" title="Hello" />
</Flex>
<Flex gap="xs" items="center">
<Avatar corner="sharp" image={image} title="Hello" />
<Avatar corner="xs" image={image} title="Hello" />
<Avatar corner="sm" image={image} title="Hello" />
<Avatar corner="md" image={image} title="Hello" />
<Avatar corner="lg" image={image} title="Hello" />
<Avatar corner="xl" image={image} title="Hello" />
<Avatar corner="full" image={image} title="Hello" />
<Avatar corner="blob-1" image={image} title="Hello" />
<Avatar corner="blob-2" image={image} title="Hello" />
<Avatar corner="blob-3" image={image} title="Hello" />
<Avatar corner="blob-4" image={image} title="Hello" />
<Avatar corner="blob-5" image={image} title="Hello" />
<Avatar corner="hand-1" image={image} title="Hello" />
<Avatar corner="hand-2" image={image} title="Hello" />
<Avatar corner="hand-3" image={image} title="Hello" />
<Avatar corner="hand-4" image={image} title="Hello" />
<Avatar corner="hand-5" image={image} title="Hello" />
<Avatar corner="hand-6" image={image} title="Hello" />
</Flex>
</>
)
}
Variant
Type: string
Default: solid
Options: solid
| outline
| soft
The variant prop specifies the visual style of the Avatar component. It can be set to one of the four values: solid
,outline
,soft
Example usage:
function AlerVariants(){
return(
<Avatar variant="solid" />
<Avatar variant="soft" />
<Avatar variant="outline" />
<Avatar variant="dashed" />
)
}
Animate
Type: string
Default: undefined
Options: zoom
| jump-x
| jump-y
The animate prop allows you to apply a predefined animation to the Avatar component, such as zoom
or jump
.
Example usage:
function AlertAnimate(){
return(
<Avatar animate="zoom" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
)
}
Avatars Fallback
The Avatar component is used to display a fallback image if the main image is not found. The fallback image can be a text string or an image file.
export function AvatarsFallback() {
return (
<Flex gap="xs" items="center">
<Avatar title="Hello" />
<Avatar image="hello.s" title="Hello" />
<Avatar image="https://pisum" title="Hello" />
</Flex>
)
}
There are a few reasons why an img tag might not render an image. Here are some of the most common reasons:
- The image file is not found. Make sure the image file is in the same directory as the HTML file, or that you have provided the correct path to the image file.
- The image file is corrupt. Try downloading the image file again.
- The image file is too large. Some web servers have a maximum file size limit for images. If your image file is too large, try resizing it or using a different image file format.
- The image file is not a supported format. Some web servers only support certain image file formats, such as JPEG, PNG, and GIF. If your image file is not in one of these formats, try converting it to a supported format.
- The image file is blocked by the browser's security settings. Some browsers block images from certain websites. If you are seeing a message that says "Image is blocked," try clearing your browser's cache and cookies.
Avatar Group
AvatarGroup is a component that groups multiple Avatar components with an optional limit and layout, and also accepts the same props as Avatar.
Props
limit
The maximum number of avatars to display.
Example usage:
function AlertGroupLimit() {
return (
<div>
<Avatar.Group limit={5}>
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
<Avatar.Group limit={5}>
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
</div>
)
}
layoutstack' | 'grid'
The layout of the avatars. Can be one of stack or grid.
Example usage:
function AlertGroupStack() {
return (
<div>
<Avatar.Group layout="stack">
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
<Avatar animate="jump-y" title="Success!" />
</Avatar.Group>
<Avatar.Group layout="grid">
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
<Avatar animate="jump-x" title="Success!" />
</Avatar.Group>
</div>
)
}
Context Props
The Avatar.Group component can be used to group multiple Avatar components together, and set common props such as color, corner, size, and variant for all the avatars in the group, instead of repeating them for each individual Avatar. This can help reduce repetition in your code and make it more efficient.
Example usage:
function AlertGroupContext() {
return (
<div>
<Avatar.Group variant="outline">
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
<Avatar.Group size="xs">
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
<Avatar.Group corner="sharp">
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
<Avatar.Group color="dan">
<Avatar title="Success!" />
<Avatar title="Success!" />
<Avatar title="Success!" />
</Avatar.Group>
</div>
)
}
Troubleshooting:
- If the Avatar component is not displaying properly, there may be an issue with the image source or size. Make sure that the image source is valid and accessible, and that the dimensions of the image are appropriate for the Avatar component.
- If the Avatar Group component is not displaying properly, there may be an issue with the number of avatars being displayed. Make sure that the Avatar Group component is configured to display the correct number of avatars, and that the spacing between the avatars is appropriate.
- If you're encountering any other issues with the Avatar or Avatar Group components, it's recommended to consult the documentation or community forums for the specific library or framework that you're using, as there may be specific troubleshooting steps or solutions available.
Best Practice
- Use avatars in a consistent way. Once you decide to use avatars on your website, it's important to use them in a consistent way. This means using the same size, shape, and style for all of your avatars. It also means using them in the same places on your website. This will help to create a more visually appealing and user-friendly experience.
- Use avatars to represent different types of users. Avatars can be used to represent different types of users on your website. For example, you could use different avatars for registered users, guest users, and administrators. This can help to make it clear to users what their role is on your website.
- Use avatars to add personality to your website. Avatars can be used to add personality to your website. This is especially important if your website is aimed at a younger audience. By using fun and creative avatars, you can help to make your website more engaging and appealing to users.
- Use avatars to promote social interaction. Avatars can be used to promote social interaction on your website. For example, you could use avatars in your comment section or forum. This can help to make your website more interactive and engaging for users.
Use Case
The Avatar component can be used in a variety of applications where users need to be represented by an image or initials, such as social media, messaging apps, and user profile pages. By providing various customization options, the Avatar component can be adapted to match the look and feel of any application.
-
User profiles: Avatar components are commonly used on user profiles to represent the user's image or identity. This can include photos of the user or custom-designed avatars that the user selects or creates.
-
User accounts: Avatar components can also be used on user accounts to identify and personalize the user's experience. This can help users feel more connected to the website or application and make it easier to navigate.
-
Social features: Avatar components are often used in social features such as chat or messaging systems, where users can see each other's avatars to identify who they are communicating with. This can make social interactions more engaging and memorable.
-
Comment sections: Avatar components can also be used in comment sections or discussion forums to represent the user who is leaving the comment. This can help to create a sense of community and make it easier to follow conversations.
Conclusion
The Avatar component is a versatile UI element that provides a simple and intuitive way to represent users with a profile picture or initials. With its many customization options, it can be easily adapted to match the look and feel of any application. Additionally, its TypeScript support makes it easy to use and integrate into TypeScript-based projects.