On this page

Angular Avatar Component

Angular Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.

Image avatars

Letter avatars

CUI

Rounded avatars

Use the shape="rounded" prop to make avatars squared with rounded corners.

CUI

Square avatars

Use the shape="rounded-0" prop to make avatars squared

CUI

Sizes

Fancy larger or smaller avatar? Add size="xl", size="lg", size="md" or size="sm" for additional sizes.

CUI

Avatars with status

CUI

Customizing

CSS variables

Angular multi selects use local CSS variables on .avatar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-avatar-width: #{$avatar-width};
--cui-avatar-height: #{$avatar-height};
--cui-avatar-font-size: #{$avatar-font-size};
--cui-avatar-border-radius: #{$avatar-border-radius};
--cui-avatar-status-width: #{$avatar-status-width};
--cui-avatar-status-height: #{$avatar-status-height};
--cui-avatar-status-border-radius: #{$avatar-status-border-radius};

How to use CSS variables

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}

&lt;div [ngStyle]="vars"&gt;&lt;/div&gt;

SASS variables

$avatar-width:                 2rem;
$avatar-height:                2rem;
$avatar-font-size:             .8rem;
$avatar-border-radius:         50em;
$avatar-status-width:          .5rem;
$avatar-status-height:         .5rem;
$avatar-status-border-radius:  50em;
$avatar-transition:            margin .15s;

$avatar-sizes: (
  sm: (
    width: 1.5rem,
    height: 1.5rem,
    font-size: .6rem,
    status-width: .4rem,
    status-height: .4rem
  ),
  md: (
    width: 2.5rem,
    height: 2.5rem,
    font-size: 1rem,
    status-width: .7rem,
    status-height: .7rem
  ),
  lg: (
    width: 3rem,
    height: 3rem,
    font-size: 1.2rem,
    status-width: .8rem,
    status-height: .8rem
  ),
  xl: (
    width: 4rem,
    height: 4rem,
    font-size: 1.6rem,
    status-width: 1rem,
    status-height: 1rem
  ),
);

API

Avatar Module

import { AvatarModule } from '@coreui/angular';

@NgModule({
 imports: [AvatarModule,]
})
export class AppModule(){}

c-avatar

component

Inputs

name	description	type	default
`color`	Sets the background color context of the component to one of CoreUI’s themed colors.	`Colors`
`shape`	Select the shape of the component.	`string`
`size`	Size the component small, large, or extra large.	Sizes	`md`
`src`	The src attribute for the img element.	`string`
`status`	Sets the color context of the status indicator to one of CoreUI’s themed colors.	`Colors`
`textColor`	Sets the text color of the component to one of CoreUI’s themed colors.	`TextColors`