Avatar

An avatar specifically refers to a character that represents an online user. Base theme present avatar in two shapes.

free

Default Avatar

Default Avatar examples below.

HTML

Avatar Shape

By default avatar component is with square shape with rounded borders. To make it circular use attribute shape="circle".

HTML

Avatar Status

Use attribute status="..." to define user status. Base theme supports two statuses, "active" and "inactive".

HTML

Avatar Sizes

Base theme Avatar supports 5 sizes. Use size="" with supported "xs", "sm", "md", "lg" or "xl" to define avatar size. Or you can define the size manually by using tailwind class for width and height.

LD

HTML

Installation

Run the following command to add this component to your project:

npx base-ui-cli add avatar

npx -y base-ui-mcp

// Install: npx base-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class YourComponent {}