Avatar

Avatar Component

The Avatar component displays user profile images or placeholders with optional status indicators and tooltips. It supports different sizes, placeholder styles (icon or initials), and status colors to indicate online/offline or other user states.

Example Usage

<x-avatar src="https://avatars.cyanfox.de" placeholderInitials="LP" status="success" tooltip="User is online" size="md" />

Props

• placeholderColor (string|null)
  Sets the background and border color for the placeholder. Options: inverse, primary, secondary, info, success, warning, danger. Defaults to a neutral surface style.

• placeholderIcon (string|null)
  CSS class for an icon to show as the placeholder instead of an image or initials.

• placeholderInitials (string|null)
  Text initials to display as a placeholder if no image or icon is provided.

• status (string|null)
  Adds a small colored status indicator badge. Options: info, success, warning, danger. Defaults to an outlined style if not specified.

• tooltip (string|null)
  Tooltip text displayed on hover over the avatar.

• size (string, default: "md")
  Controls the avatar size. Supported sizes: xs, sm, md, lg.

Overview

This Avatar component is a flexible user avatar display that supports images, initials, or icons as placeholders. It features a status badge for online or status indication and can show tooltips. The component is styled with Tailwind CSS and supports dark mode.