Avatar Component

ℹ️

The Avatar component is used to display user avatars with various customization options. You can use it in any React application and customize it according to your design needs. This component is inspired by the DaisyUI (opens in a new tab) framework's design for avatars.

Example Preview

Avatar Example

Options

The following options are available for the Avatar component:

Option	Description	Default
`className`	The class name for the component.	`''`
`src`	The source URL for the avatar image.	Default placeholder image URL
`mask`	The mask shape for the avatar (e.g., 'squircle', 'hexagon').	`'default'`
`size`	The size of the avatar ('xSmall', 'small', 'default', 'medium', 'large', 'xLarge').	`'medium'`
`rounded`	The rounded corners style ('none', 'default', 'small', 'medium', 'large', 'full').	`'default'`
`ring`	The ring style for the avatar ('default', 'primary', 'secondary', 'info', 'accent', 'success', 'warning', 'error').	`'default'`
`presence`	The presence status for the avatar ('online', 'offline').	`''` (empty string for default)
`children`	React components to be rendered inside the Avatar.	`undefined`

Example Usage

The following example shows how to use the Avatar component:

import React from "react";
import { Avatar } from "@/path/to/Avatar";
 
export const UserProfile = () => (
  <Avatar
    src="https://example.com/user-profile-image.jpg"
    mask="squircle"
    size="large"
    rounded="full"
    ring="primary"
    presence="online"
  />
);

Customization Options

The following customization options are available for the Avatar component:

Option	Description	Default
`className`	The class name for the component.	`''`
`src`	The source URL for the avatar image.	Default placeholder image URL
`mask`	The mask shape for the avatar (e.g., 'squircle', 'hexagon').	`'default'`
`size`	The size of the avatar ('xSmall', 'small', 'default', 'medium', 'large', 'xLarge').	`'medium'`
`rounded`	The rounded corners style ('none', 'default', 'small', 'medium', 'large', 'full').	`'default'`
`ring`	The ring style for the avatar ('default', 'primary', 'secondary', 'info', 'accent', 'success', 'warning', 'error').	`'default'`
`presence`	The presence status for the avatar ('online', 'offline').	`''` (empty string for default)
`children`	React components to be rendered inside the Avatar.	`undefined`

Props Table

The following props table shows the available props for the Avatar component:

Name	Type	Default	Description
`className`	`string`	`''`	The class name for the component.
`src`	`string`	Default placeholder image URL	The source URL for the avatar image.
`mask`	`string`	`'default'`	The mask shape for the avatar (e.g., 'squircle', 'hexagon').
`size`	`string`	`'medium'`	The size of the avatar ('xSmall', 'small', 'default', 'medium', 'large', 'xLarge').
`rounded`	`string`	`'default'`	The rounded corners style ('none', 'default', 'small', 'medium', 'large', 'full').
`ring`	`string`	`'default'`	The ring style for the avatar ('default', 'primary', 'secondary', 'info', 'accent', 'success', 'warning', 'error').
`presence`	`string`	`''`	The presence status for the avatar ('online', 'offline').
`children`	`ReactNode`	`undefined`	React components to be rendered inside the Avatar.

Avatar Variants

The following variants are available for the Avatar component:

Mask Variants:
- 'default'
- 'squircle'
- 'hexagon'
- 'triangle'
Size Variants:
- 'xSmall'
- 'small'
- 'default'
- 'medium'
- 'large'
- 'xLarge'
Rounded Variants:
- 'none'
- 'default'
- 'small'
- 'medium'
- 'large'
- 'full'
Ring Variants:
- 'default'
- 'primary'
- 'secondary'
- 'info'
- 'accent'
- 'success'
- 'warning'
- 'error'

Avatar Body Variants

The following variants are available for the Avatar body:

Presence Variants:
- 'online'
- 'offline'
- 'default'

Example Customization

The following example shows how to customize the Avatar component:

const CustomizedAvatar = () => (
  <Avatar
    className="custom-avatar"
    src="https://example.com/user-profile-image.jpg"
    mask="hexagon"
    size="xLarge"
    rounded="full"
    ring="info"
    presence="offline"
  >
    {/* Additional components or content */}
  </Avatar>
);

ℹ️

Note: The Avatar component is a versatile React component designed for displaying user avatars with different sizes, shapes, and styles. This component is inspired by the DaisyUI (opens in a new tab) framework's design for avatars. Check it out for more awesome components.

Alert Badge