Avatar

A flexible avatar component for displaying profile pictures, initials, or placeholders with various sizes and styles.

<!-- With image -->
<c-avatar src="image.jpg" alt="Profile picture"></c-avatar>

<!-- Placeholder with initials -->
<c-avatar color="primary" circle>JD</c-avatar>

Component API

Property	Type	Default	Description
`src`	`string`	`-`	Image URL for the avatar. If not provided, shows placeholder content
`size`	`string`	`md`	Size: `xs`, `sm`, `md`, `lg`, `xl`
`circle`	`boolean`	`false`	Display as circle (default is rounded square)
`color`	`string`	`neutral`	Background color: `primary`, `secondary`, `accent`, `neutral`, `info`, `success`, `warning`, `error`, or any Tailwind class (e.g., `bg-blue-500`)
`online`	`boolean`	`-`	Online status indicator (`online="true"` or `online="false"`)
`ring`	`boolean`	`false`	Show a colored ring around the avatar
`text_color`	`string`	`auto`	Text color (auto-set with DaisyUI colors, override with Tailwind class for custom colors)
`alt`	`string`	`Avatar`	Alt text for image avatars (accessibility)

Examples

Different Sizes

Avatars can be displayed in various sizes to fit different UI contexts.

<c-avatar size="xs" color="primary" circle>XS</c-avatar>
<c-avatar size="sm" color="secondary" circle>SM</c-avatar>
<c-avatar size="md" color="accent" circle>MD</c-avatar>
<c-avatar size="lg" color="info" circle>LG</c-avatar>
<c-avatar size="xl" color="success" circle>XL</c-avatar>

Different Shapes

By default, avatars have rounded corners. Use the circle attribute for circular avatars.

Rounded (default)

Circle

<!-- Rounded (default) -->
<c-avatar size="lg" color="primary">RD</c-avatar>

<!-- Circle -->
<c-avatar size="lg" color="secondary" circle>CI</c-avatar>

Colors

Use DaisyUI semantic colors or any Tailwind background class.

<!-- DaisyUI colors (text color auto-set) -->
<c-avatar color="primary" circle>P</c-avatar>
<c-avatar color="secondary" circle>S</c-avatar>
<c-avatar color="success" circle>S</c-avatar>
<c-avatar color="error" circle>E</c-avatar>

<!-- Custom Tailwind colors (specify text_color) -->
<c-avatar color="bg-blue-500" text_color="text-white" circle>TW</c-avatar>
<c-avatar color="bg-pink-400" text_color="text-white" circle>TW</c-avatar>

Online Status

Show online/offline status with built-in indicators.

Online

OFF

Offline

With Image

<c-avatar size="lg" online="true" color="success" circle>ON</c-avatar>
<c-avatar size="lg" online="false" color="neutral" circle>OFF</c-avatar>
<c-avatar src="image.jpg" size="lg" online="true" circle></c-avatar>

With Ring

Add a colored ring around avatars for emphasis or status indication.

<c-avatar size="lg" ring color="primary" circle>RI</c-avatar>
<c-avatar src="image.jpg" size="lg" ring circle></c-avatar>

Avatar Groups

Display multiple avatars in overlapping groups for teams or collaborators using the c-avatar-group component.

Default spacing

Team Example

<c-avatar-group>
    <c-avatar size="sm" color="primary" circle>A</c-avatar>
    <c-avatar size="sm" color="secondary" circle>B</c-avatar>
    <c-avatar size="sm" color="accent" circle>C</c-avatar>
</c-avatar-group>

<c-avatar-group spacing="2">
    <c-avatar src="image.jpg" circle></c-avatar>
    <c-avatar color="info" circle>JS</c-avatar>
    <c-avatar color="neutral" circle>+5</c-avatar>
</c-avatar-group>

Avatar Group API

Property	Type	Default	Description
`spacing`	`string`	`3`	Numeric spacing (1=tight, 6=wide)

Appendix

Usage Guidelines

Accessibility

Always provide meaningful alt text for image avatars and ensure sufficient color contrast for placeholder avatars.

Image Loading

Consider providing fallback initials or placeholders for cases where profile images fail to load.

Tungsten UI 💡