Avatar

Avatars are found throughout material design with uses in everything from tables to dialog menus.

Author

• @author Vigneshwaran [email protected]

Link

Story Book Link Avatar

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_avatar

Import component

import { Avatar } from '@licuido-ui/ui_avatar';

<Avatar
  avatarData={[]}
  fontSize=""
  />

Usage

<Avatar
  avatarData={[]}
  fontSize="14px"
  backgroundColor="#f0f0f0"
  dummyAvatarBackgroundColor='#CBCBCB'
  borderColor="#ccc"
  border="1px solid"
  height="50px"
  width="50px"
  max={3}
  handleAvatarGroupClick={(e) => console.log('Avatar Group Clicked!', e)}

Image

Props

| Prop Name | Type | Description | | ------------------------ | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | className | string | Override class name for additional styling. | | sx | SxProps or SxProps[] | System overrides and additional CSS styles. | | avatarData | AvatarInterface[] | An array of objects containing data for individual avatars (see AvatarInterface for details). | | fontSize | string | Font size of the avatars. | | backgroundColor | string | Background color of the avatars. | | avatarBackgroundColor | string | Background color of the dummy avatars. | | borderColor | string | Border color of the avatars. | | border | string | Border style of the avatars. | | height | string | Height of the avatars. | | width | string | Width of the avatars. | | variant | 'rounded' or 'square' or 'circular' or AvatarGroupPropsVariantOverrides | Variant of the avatar (either 'rounded', 'square', 'circular', or an object for additional variant overrides). | | max | number | Maximum number of avatars to display in the AvatarGroup. | | handleAvatarGroupClick | (e: React.MouseEvent) => void | undefined | Callback function triggered on AvatarGroup click. |