bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Avatar

Avatars are visual representations of users or entities, displaying profile pictures, initials, or placeholder images.

When to use

Use avatars to provide visual identification and improve recognition of users or entities throughout your application.

User Profiles

Display user profile pictures in headers, navigation menus, or account settings.

Comment Threads

Show who authored each comment or message in discussion threads and chat interfaces.

Team Members

Represent team members, collaborators, or assigned users in task management and collaboration tools.

Contact Lists

Enhance contact lists and user directories with visual identifiers for quick recognition.

When not to use

  • When displaying detailed user profiles—use a card or dedicated profile page
  • For decorative images—use standard img elements instead
  • When the user identity isn't relevant to the context
  • For large groups (10+)—consider using avatar-stacked or a count indicator

Examples

Interact with live examples and copy the code to use in your project.

Avatar Sizes

Five size options from extra small to extra large for different contexts

chevron_right HTML 
<bh-avatar size="xs" type="text" text="XS"></bh-avatar>
<bh-avatar size="sm" type="text" text="SM"></bh-avatar>
<bh-avatar size="md" type="text" text="MD"></bh-avatar>
<bh-avatar size="lg" type="text" text="LG"></bh-avatar>
<bh-avatar size="xl" type="text" text="XL"></bh-avatar>
chevron_right React 
import { BhAvatar } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
		<BhAvatar size="xs" type="text" text="XS"></BhAvatar>
		<BhAvatar size="sm" type="text" text="SM"></BhAvatar>
		<BhAvatar size="md" type="text" text="MD"></BhAvatar>
		<BhAvatar size="lg" type="text" text="LG"></BhAvatar>
		<BhAvatar size="xl" type="text" text="XL"></BhAvatar>
    
  );
}
chevron_right Angular 
<bh-avatar size="xs" type="text" text="XS"></bh-avatar>
<bh-avatar size="sm" type="text" text="SM"></bh-avatar>
<bh-avatar size="md" type="text" text="MD"></bh-avatar>
<bh-avatar size="lg" type="text" text="LG"></bh-avatar>
<bh-avatar size="xl" type="text" text="XL"></bh-avatar>

Avatar with Image

Display profile pictures using the img-src attribute

chevron_right HTML 
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/concierge.png"></bh-avatar>
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/directorEng.png"></bh-avatar>
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/GeneralMgr.png"></bh-avatar>
chevron_right React 
import { BhAvatar } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      <BhAvatar size="md" imgSrc="https://esm.sh/@actabldesign/[email protected]/src/avatars/concierge.png" />
      <BhAvatar size="md" imgSrc="https://esm.sh/@actabldesign/[email protected]/src/avatars/directorEng.png" />
      <BhAvatar size="md" imgSrc="https://esm.sh/@actabldesign/[email protected]/src/avatars/GeneralMgr.png" />
    </>
  );
}
chevron_right Angular 
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/concierge.png"></bh-avatar>
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/concierge.png"></bh-avatar>
<bh-avatar size="md" image-src="https://esm.sh/@actabldesign/[email protected]/src/avatars/concierge.png"></bh-avatar>

Anatomy

Avatars consist of a circular or square container with content and optional status indicators.

  1. Container

    Circular or square background shape that holds the avatar content

  2. Image/Initials/Icon

    Primary content showing profile picture, text initials, or placeholder icon

  3. Status Indicator (Optional)

    Small badge showing online/offline/busy status or notification count

Types

Avatars come in different sizes and content types to fit various UI contexts.

Sizes

Available in multiple sizes from extra small (xs) to extra large (xl) to accommodate different use cases.

Content Types

Support for profile images, text initials, and placeholder icons to represent users in different scenarios.

With Status

Optional status indicators showing online presence, busy state, or notification badges.

Text Initials

Display user initials when profile images are not available, with auto-generated background colors.

Interaction

Avatars can be interactive elements that respond to user actions.

Clickable Avatars

When clickable, avatars can navigate to user profiles or trigger profile menus with hover and focus states.

Static Display

Non-interactive avatars serve as visual identifiers without click handlers or hover effects.

Status Updates

Status indicators update in real-time to reflect current user presence or notification state.

Image Loading

Graceful fallback to initials or placeholder when profile images fail to load.

Placement

Avatars can be placed in various UI contexts to represent users and entities.

Navigation Bars

Place in headers or navigation menus for quick access to user profiles or account settings.

Lists and Tables

Use in data tables or list items to identify users, authors, or assignees.

Cards and Panels

Display in user cards, profile panels, or contact information sections.

Message Threads

Show next to messages, comments, or chat bubbles to indicate the author.

Accessibility

Avatars are designed to be accessible to all users including those using assistive technologies.

Alternative Text

  • Profile images include descriptive alt text with user names
  • Icon avatars have appropriate ARIA labels
  • Initials avatars announce the full user name to screen readers

Keyboard Support

  • Tab: Move focus to clickable avatars
  • Enter/Space: Activate clickable avatars
  • Non-interactive avatars are excluded from tab order

Status Indicators

  • Status badges include ARIA labels describing presence state
  • Status changes are announced to screen readers
  • Color is not the only means of conveying status information

Focus Management

  • Clear focus indicators on interactive avatars
  • Sufficient color contrast for focus states
  • Focus remains visible when avatars are clicked

Resources

Design and development resources for the Avatar component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →