Avatar

The Avatar component shows either an image or a user's initials in a frame with a 1-to-1 size ratio. It scales to any size supported in

your Tailwind config. It's accompanied by the companion component AvatarGroup, which can wrap a set of Avatar components.

Code Example

<Avatar class="w-12">
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Components

Avatar is a standalone component.

Avatar

The Avatar component's styles and behavior can be customized with following props:

Prop	Type	Description
`show-status`	boolean	shows an status indicator
`online`	boolean	makes the status indicator show as online
`background-color`	string	sets the background-color CSS property and automatically adjusts the text color for optimum contrast.
`mask-classes`	string	adds classes to the internal Mask instance
`shape`	string	sets the shape of the internal Mask to any of the below prop names
`squircle`	boolean	sets the shape to `squircle`.
`heart`	boolean	sets the shape to `heart`.
`hexagon`	boolean	sets the shape to `hexagon`.
`hexagon2`	boolean	sets the shape to `hexagon2`.
`decagon`	boolean	sets the shape to `decagon`.
`pentagon`	boolean	sets the shape to `pentagon`.
`diamond`	boolean	sets the shape to `diamond`.
`square`	boolean	sets the shape to `square`.
`circle`	boolean	sets the shape to `circle`.
`parallelogram`	boolean	sets the shape to `parallelogram`.
`parallelogram2`	boolean	sets the shape to `parallelogram2`.
`parallelogram3`	boolean	sets the shape to `parallelogram3`.
`parallelogram4`	boolean	sets the shape to `parallelogram4`.
`star`	boolean	sets the shape to `star`.
`star2`	boolean	sets the shape to `star2`.
`triangle`	boolean	sets the shape to `triangle`.
`triangle2`	boolean	sets the shape to `triangle2`.
`triangle3`	boolean	sets the shape to `triangle3`.
`triangle4`	boolean	sets the shape to `triangle4`.

Size

Use Tailwind classes to size your Avatars. You can assign either a width class or a height class and the Avatar will keep a 1-to-1 ratio.

w-6

w-10

w-16

w-24

w-36

Code Example

<Avatar class="w-12">
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Presence

Avatar comes with a status indicator, which you can enable with the show-status prop. You can then use the online boolean prop to indicate presence.

Code Example

<Avatar class="w-36" show-status :online="user.isOnline">
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Avatar is built on top of the Mask component, so you can use Mask properties to give the Avatar a creative shape. It also works well with online/offline status, making sure to not clip the indicator.

squircle

heart

hexagon

hexagon-2

decagon

pentagon

diamond

square

circle

parallelogram

parallelogram-2

parallelogram-3

parallelogram-4

star

star-2

triangle

triangle-2

triangle-3

triangle-4

Code Example

<Avatar class="w-36" show-status :online="user.isOnline">
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Ring Styles

When none of the Mask props are in use, you can apply ring styles to the Avatar through the mask-classes prop. These classes are placed on the internal Mask element. This allows you to apply ring styles or other class names as shown in the below examples.

Code Example

<Avatar class="w-24" mask-class="esring ring-primary ring-offset-base-100 ring-offset-2">
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Outer Ring Styles with Mask

When you use any of the Mask props, the mask shape will cut off any UI outside of it, including borders and ring styles. This means ring styles or other classes must be applied to the outer container, as shown here.

Code Example

<Avatar 
  squircle 
  class="w-24 rounded-btn ring ring-primary ring-offset-base-100 ring-offset-2"
>
  <img src="http://daisyui.com/[email protected]">
</Avatar>

Mask Rings

You can simulate a ring effect around a Mask by nesting the Avatar inside of a Mask with a colored background.

Code Example

<Mask squircle class="flex items-center justify-center p-1.5 bg-primary">
  <Avatar squircle class="w-24">
    <img src="http://daisyui.com/[email protected]">
  </Avatar>
</Mask>

For a layered effect, you can use an additional Mask with a different background color. Or use your imagination and get creative!

Code Example

<Mask squircle class="flex items-center justify-center p-1.5 bg-primary">
  <Mask squircle class="flex items-center justify-center p-1 bg-neutral">
    <Avatar squircle class="w-24">
      <img src="http://daisyui.com/[email protected]">
    </Avatar>
  </Mask>
</Mask>

Avatar Placeholders

Avatar can also be used when you don't have an image. You must nest the text inside an element. Otherwise, the Avatar will flatten.

Vanessa

Code Example

<Mask squircle class="flex items-center justify-center p-1.5 bg-primary">
  <Avatar squircle class="w-24">
    <img src="http://daisyui.com/[email protected]">
  </Avatar>
</Mask>

Prev Alert

Next AvatarGroup