LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
<div class="lui-avatar lui-avatar--circle lui-avatar--xl">
  <img alt="Avatar" class="lui-avatar__image" src="/assets/loopos_ui/avatar/user-avatar-67eed4fa.png" />
</div>

Avatar

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
<%
    preview_params[:image_url] = :default if preview_params[:image_url] == ":default"
%>
<%= render LooposUi::Avatar.user(**preview_params) %>

No notes provided.

Param Description Input

—

—

Avatar Component

The Avatar component displays user or partner profile images with consistent styling and sizing options.

Overview

Avatars are used to represent users or partners throughout the LoopOS UI. They provide visual identity and help users quickly identify different entities in the system.

Arguments

Property Type Default Required Description
type Symbol.enum(:circle, :square) :circle No Visual style of the avatar
size Symbol.enum(:xs, :small, :medium, :large, :xl, :xxl) :medium No Size of the avatar
image_url String, Symbol.enum(:default) - Yes URL of the image or :default for built-in images

Factory Methods

LooposUi::Avatar.user(user: @user, **options)

Creates a circle avatar (typically for users) with the specified image and options.

LooposUi::Avatar.partner(partner: @partner, **options)

Creates a square avatar (typically for partners/organizations) with the specified image and options.

Size Variants

Size Dimensions Use Case
:xs 12px × 12px Compact lists, dense layouts
:small 16px × 16px Standard lists, comments
:medium 20px × 20px Default size, general use
:large 32px × 32px Prominent display, user profiles
:xl 40px × 40px Hero sections, main navigation

Default Images

When image_url: :default is used, the component automatically selects the appropriate default image:

  • Circle avatars: loopos_ui/avatar/user-avatar.png
  • Square avatars: loopos_ui/avatar/partner-avatar.png

Best Practices

  1. Use factory methods for common use cases (user() and partner())
  2. Use appropriate sizes for the context (XS for lists, XL for prominent display)
  3. Handle missing images gracefully by using :default