@n8d/htwoo-patterns/_patterns/molecules/avatar-with-presence/avatar-presence.md

hTWOo Patterns to setup custom style guide

---
title: Avatar with Presence
---

## 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

***