Skip to content
@avatar-generator Docs

Avatar Reference

This page provides detailed information about the props accepted by the Avatar component in both @avatar-generator/react and @avatar-generator/angular.

Props

The following props are common for both the React and Angular versions of the Avatar component.

name (required)

  • Type: string
  • Description: The name to display in the avatar. It is typically the user’s first and last name or initials.
  • Default: "" (empty string)
  • Example: "John Doe"

backgroundColor

  • Type: string
  • Description: The background color of the avatar.
  • Default: "#ccc"
  • Example: "#4CAF50"

textColor

  • Type: string
  • Description: The color of the text (the initials) displayed inside the avatar.
  • Default: "#fff"
  • Example: "#FFFFFF"

fontSize

  • Type: string
  • Description: The font size for the text inside the avatar.
  • Default: "40px"
  • Example: "48px"

shape

  • Type: "circle" | "square"
  • Description: The shape of the avatar. It can either be a circle or a square.
  • Default: "circle"
  • Example: "circle"

Summary

The Avatar component for both React and Angular supports several customizable props to fit your design requirements. You can set properties such as name, backgroundColor, textColor, fontSize, and shape to customize the avatar’s appearance.

Refer to this guide for a comprehensive list of props and how to use them in your project, whether you’re using React or Angular.

This guide will help users understand and utilize all available configuration options for both the React and Angular versions of the Avatar component.