Avatar
Avatar is a visual representation of a user.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Avatar } from '@adaptavant/eds-core';
Name
The name prop labels the avatar with the user's name. If no image is provided, the avatar shows the first letter of the user's name.
Size
The size of the avatar can be customised via the size prop.
{/* size: 16 */}
<Avatar name="Freddy" size="16">
<AvatarImage src="https://placehold.co/16.png" />
</Avatar>
{/* size: 20 */}
<Avatar name="Freddy" size="20">
<AvatarImage src="https://placehold.co/20.png" />
</Avatar>
{/* size: 24 */}
<Avatar name="Freddy" size="24">
<AvatarImage src="https://placehold.co/24.png" />
</Avatar>
{/* size: 32 */}
<Avatar name="Freddy" size="32">
<AvatarImage src="https://placehold.co/32.png" />
</Avatar>
{/* size: 40 */}
<Avatar name="Freddy" size="40">
<AvatarImage src="https://placehold.co/40.png" />
</Avatar>
{/* size: 48 */}
<Avatar name="Freddy" size="48">
<AvatarImage src="https://placehold.co/48.png" />
</Avatar>
{/* size: 64 */}
<Avatar name="Freddy" size="64">
<AvatarImage src="https://placehold.co/64.png" />
</Avatar>
{/* size: 96 */}
<Avatar name="Freddy" size="96">
<AvatarImage src="https://placehold.co/96.png" />
</Avatar>Image
Avatar can display an image by using an AvatarImage inside of it:
<Avatar name="Freddy" size="40">
<AvatarImage src="https://placehold.co/40.png" />
</Avatar>If an image fails to load, a fallback will be shown:
Icon
Avatar can display an icon by using an AvatarIcon inside of it:
Status
The Avatar component can optionally show a user's status via the status prop.
{/* available */}
<Avatar name="Freddy" size="40" status="available" />
{/* away */}
<Avatar name="Freddy" size="40" status="away" />
{/* busy */}
<Avatar name="Freddy" size="40" status="busy" />
{/* offline */}
<Avatar name="Freddy" size="40" status="offline" />
{/* onCall */}
<Avatar name="Freddy" size="40" status="onCall" />
{/* onCall */}
<Avatar name="Freddy" size="40" status="audioCall" />
{/* onCall */}
<Avatar name="Freddy" size="40" status="customer" />As Guest
Whether the avatar is a guest
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Avatar parts
<Avatar
className="border border-accent"
classNames={{
initial: 'font-stronger',
statusBadge: 'fill-accent',
}}
name="Freddy"
size="40"
status="available"
/>Stylable Parts | Description |
|---|---|
initial | The initial or text displayed when there is no image. |
image | The image displayed in the avatar. |
statusBadge | The element which indicates the user's status, such as available, offline, busy. |
AvatarImage parts
{/* Styling the root element of the AvatarImage */}
<Avatar name="Freddy" size="40">
<AvatarImage
className="object-contain"
src="https://placehold.co/100x50"
/>
</Avatar>
{/* Styling the fallback image of the AvatarImage */}
<Avatar name="Freddy" size="40">
<AvatarImage
classNames={{
brokenImage: 'fill-critical',
}}
src="https://placehold.co/unknown.png"
/>
</Avatar>Stylable Parts | Description |
|---|---|
brokenImage | The fallback image displayed when the specified image fails to load. We use an svg icon as fallback image. |
AvatarIcon parts
<Avatar name="Freddy" size="40">
<AvatarIcon className="fill-critical" icon={ProfileIcon} />
</Avatar>No parts available. Only root.
Usage guidelines
Do
- Use the Avatar component to reflect a person within the product.
- Accessibility: Make avatars accessible by incorporating alternative text or labels for screen readers, ensuring inclusivity for users with disabilities.
- Proper sizing: Choose appropriate avatar sizes based on their context and importance in the user interface. Avoid excessively large or small avatars that may disrupt the design flow.
- Hover/Interaction states: Implement clear hover or interaction states for avatars to provide feedback and enhance the user experience during interactions.
Don’t
- Use the Avatar component to represent companies and/or brands. Use the Image component instead.
- Inconsistent design elements: Avoid using different styles or shapes for avatars without a clear reason. Consistency in design elements fosters a more polished and professional appearance.
- Tiny click targets: Refrain from creating avatars with extremely small click targets, especially on touch devices. Ensure that users can easily interact with avatars without frustration.
- Inappropriate context: Avoid using avatars in contexts where they may be irrelevant or distracting. Consider the purpose and appropriateness of displaying avatars in different parts of your user interface.
Best practices
Do
If no image source is available, utilize the default alternative, which will be derived from the initial character of the given name.
Don’t
Employ substitute graphics or emojis.
Do
Opt for circular avatars tailored to your specific size requirements. Explore further details on avatar sizing.
Don’t
Avoid scaling or altering the shape of the avatar. Instead, adhere to the designated avatar sizes and styles.