Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

import { Avatar } from '@nextui-org/react';

Default

You can display an avatar with just text or image

Sizes

The Avatar comes in 5 sizes and you can also set a custom size in px with size property.

Colors

You can change the color with color prop

Bordered

You can change the full style towards a bodered Avatar with the bordered property.

Zoomed

You can apply a zoom animation to avatar with the zoomed property.

Squared

You can change the full style towards a squared Avatar with the squared property.

Icon

NextUI doesn't use any library or icon font by default, with this we give the freedom to use the one you prefer. In the following example we use Boxicons

Group

You can group several avatar with the parent component Avatar.Group

APIs

Avatar Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColors stringNormalColorsChange avatar colordefault
textColorSimpleColors stringSimpleColorsChange avatar text colordefault
srcstring-Image source (local or remote)-
textstring-Display text when image is missing-
altstring-Display alt text when image is missing-
sizeNormalSizes numberNormalSizesAvatar sizemedium
borderedbooleantrue/falseBodered avatarfalse
borderWeightNormalWeightsNormalWeightsBorder weight for bordered avatarnormal
pointerbooleantrue/falseDisplay pointer cursor on hoverfalse
stackedbooleantrue/falseStacked display groupfalse
zoomedbooleantrue/falseZoomed avatarfalse
squaredbooleantrue/falseSquared avatarfalse
iconReactNode-Show icon in avatar-
...ImgHTMLAttributes'alt', 'crossOrigin', 'className', ...Native props-

Avatar Group Props

AttributeTypeAccepted valuesDescriptionDefault
countnumber-Total count of avatars-
animatedboolean-Display translations animation on hoverfalse
...HTMLAttributes'id', 'name', 'className', ...Native props-

Avatar types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';
type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';