x
1
2
3
<div class="lui-avatar lui-avatar--square lui-avatar--xl"> <img alt="Avatar" class="lui-avatar__image" src="/assets/loopos_ui/avatar/partner-avatar-f6c5bcd3.png" /></div>Avatar
Description
Related components
| 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.partner(**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
- Use factory methods for common use cases (
user()andpartner()) - Use appropriate sizes for the context (XS for lists, XL for prominent display)
- Handle missing images gracefully by using
:default