Avatar

Name: Nayan UI
Author: Nayan UI

An Avatar component shows a person or entity as a small image, with initials or an icon standing in when there is no picture to show. Avatars identify the author of a comment, the owner of a file or the member of a team, in a shape that stays recognisable at any size.

Demo

Rendered live, with the same build of the library you install.

Colors:

NDAKRSJPMM

Sizes:

SMMDLG

Usage

Source

Avatar.tsx

import { NAvatar } from '@nayan-ui/react';

const Avatar = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Colors:</h3>
      <div className="mb-5 flex flex-wrap items-center gap-2">
        <NAvatar fallback="ND" />
        <NAvatar fallback="AK" color="accent" variant="soft" />
        <NAvatar fallback="RS" color="success" variant="soft" />
        <NAvatar fallback="JP" color="warning" variant="soft" />
        <NAvatar fallback="MM" color="danger" variant="soft" />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Sizes:</h3>
      <div className="flex flex-wrap items-center gap-2">
        <NAvatar fallback="SM" size="sm" color="accent" variant="soft" />
        <NAvatar fallback="MD" size="md" color="accent" variant="soft" />
        <NAvatar fallback="LG" size="lg" color="accent" variant="soft" />
      </div>
    </div>
  );
};

export default Avatar;

Attributes

10 props

Name	Type	Default	Details
src	string	Optional	The src prop.
alt	string	''	The alt prop.
fallback	React.ReactNode	Optional	The fallback prop.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'default'	The color prop.
variant	'default' \| 'soft'	'default'	The variant prop.
className	string	''	The className prop.
imageClassName	string	''	The imageClassName prop.
fallbackClassName	string	''	The fallbackClassName prop.
loading	'eager' \| 'lazy'	'lazy'	The loading prop.