🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Avatar with Presence

View in Pattern Lab

HTML Markup

<div class="hoo-avatar-pres">
    <div class="hoo-avatar">
        <img src="/htwoo-core/images/mug-shots/astronaut-mugshot-001.jpg" alt="" class="hoo-avatar-img"   loading="lazy">
    </div>
    <div class="hoo-presence is-" title="Fluent UI / Fluent Design by hTWOo UI Framework">
    </div>
</div>

Overview

The Avatar with Presence component combines a user avatar with a status indicator to show the user’s availability. This is the default 128px size variant.

Usage

The Avatar with Presence component should be used in interfaces where it’s important to display both a user’s image and their current status. Common use cases include:

  • User profiles
  • Chat and messaging interfaces
  • Team member directories
  • Comment sections
  • Collaboration tools

Features

  • Displays user image in a circular container
  • Shows presence/status through a colored indicator
  • Status indicator positioned at bottom-right corner
  • Default size of 128px (can be customized)
  • Clean integration between avatar and status indicator

Accessibility

  • Status indicators include title attributes for screen reader users
  • When implementing, ensure avatar images have appropriate alt text
  • The combination provides visual cues with supporting text information

SCSS Imports

Main Component
@n8d/htwoo-core/components/avatar