Avatar

The Avatar component is used to represent a user by displaying either their initials or an image. It supports customization of size and shape.

Import

import { Avatar } from '@frontile/utilities';

Usage

Basic

By default, the Avatar component will display initials derived from the @name, @firstName, and @lastName arguments.

JS AS

import { Avatar } from '@frontile/utilities';

<template>
  <div class='flex items-center space-x-4 py-2'>
    <Avatar @name='Jon Snow' />
    <Avatar @firstName='Arya' @lastName='Stark' />
  </div>
</template>

With an Image

If an @src is provided, the avatar will display the image instead of initials.

import { Avatar } from '@frontile/utilities';

<template>
  <Avatar @src='https://i.pravatar.cc/150?img=5' @alt='Jon Snow' />
</template>

Different Sizes

The @size property allows you to customize the avatar's size.

JS JS JS JS JS

import { Avatar } from '@frontile/utilities';

<template>
  <div class='flex items-center space-x-4 py-2'>
    <Avatar @name='Jon Snow' @size='xs' />
    <Avatar @name='Jon Snow' @size='sm' />
    <Avatar @name='Jon Snow' @size='md' />
    <Avatar @name='Jon Snow' @size='lg' />
    <Avatar @name='Jon Snow' @size='xl' />
  </div>

  <div class='flex items-center space-x-4 py-2'>
    <Avatar @size='xs' @src='https://i.pravatar.cc/150?img=1' />
    <Avatar @size='sm' @src='https://i.pravatar.cc/150?img=2' />
    <Avatar @size='md' @src='https://i.pravatar.cc/150?img=3' />
    <Avatar @size='lg' @src='https://i.pravatar.cc/150?img=4' />
    <Avatar @size='xl' @src='https://i.pravatar.cc/150?img=5' />
  </div>
</template>

Shapes

The @shape property changes the avatar shape.

JS JS

import { Avatar } from '@frontile/utilities';

<template>
  <div class='flex items-center space-x-4 py-2'>
    <Avatar @name='Jon Snow' @shape='circle' />
    <Avatar @name='Jon Snow' @shape='square' />
  </div>
</template>

Accessibility

To provide better accessibility, the @alt attribute should be used when displaying an image.

import { Avatar } from '@frontile/utilities';

<template>
  <Avatar @src='https://i.pravatar.cc/150?img=5' @alt='User profile picture' />
</template>

If no @alt is provided, screen readers will read the initials.

Custom Styling

You can pass custom @classes to override styling:

import { Avatar } from '@frontile/utilities';
import { hash } from '@ember/helper';

<template>
  <Avatar
    @name='Jon Snow'
    @classes={{hash
      base='bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white'
    }}
  />
</template>

API

Avatar

Element: HTMLSpanElement

Arguments

    
            Name
          
            Type
          
            Default
          
            Description
          
                    alt
                  
                  string
                
                  -
              
                Alternative text for accessibility.
If `@src` is provided, this text will be used as the `alt`
attribute for the image.
If only initials are displayed, this text will be read by screen readers.
              
                    classes
                  
                  SlotsToClasses<'name' | 'base' | 'img'>
                
                  -
              
                Custom CSS classes for styling different slots within the avatar component.
              
                    firstName
                  
                  string
                
                  -
              
                First name of the user, used to generate initials.
If `@name` is not provided, initials will be generated from
`@firstName` and `@lastName`.
              
                    lastName
                  
                  string
                
                  -
              
                Last name of the user, used to generate initials.
If `@name` is not provided, initials will be generated from
`@firstName` and `@lastName`.
              
                    name
                  
                  string
                
                  -
              
                Full name of the user, used to generate initials.
If `@firstName` and `@lastName` are not provided, initials will be
derived from this property.
              
                    shape
                  
                  enum
                
                    'circle'
                  
                Defines the shape of the avatar.
              
                    size
                  
                  enum
                
                    'md'
                  
                Controls the size of the avatar.
              
                    src
                  
                  string
                
                  -
              
                URL of the image to be displayed in the avatar.
If provided, the image will be used instead of initials.

Name	Type	Default	Description
`alt`	`string`	-	Alternative text for accessibility. If `@src` is provided, this text will be used as the `alt` attribute for the image. If only initials are displayed, this text will be read by screen readers.
`classes`	`SlotsToClasses<'name' \| 'base' \| 'img'>`	-	Custom CSS classes for styling different slots within the avatar component.
`firstName`	`string`	-	First name of the user, used to generate initials. If `@name` is not provided, initials will be generated from `@firstName` and `@lastName`.
`lastName`	`string`	-	Last name of the user, used to generate initials. If `@name` is not provided, initials will be generated from `@firstName` and `@lastName`.
`name`	`string`	-	Full name of the user, used to generate initials. If `@firstName` and `@lastName` are not provided, initials will be derived from this property.
`shape`	`enum`	`'circle'`	Defines the shape of the avatar.
`size`	`enum`	`'md'`	Controls the size of the avatar.
`src`	`string`	-	URL of the image to be displayed in the avatar. If provided, the image will be used instead of initials.