@illa-design/avatar v1.3.0

Avatar

The Avatar component is used to represent a user and displays the pictures, text or icon.

Installation

yarn add @illa-design/avatar

Import component

import { Avatar } from "@illa-design/avatar"

API

Avatar Basic Properties

Avatar-group Basic Properties

Avatar Events

Example

import Sandpack from '@site/src/components/Sandpack'

export const code = `
    <>
      <Avatar />
      <Avatar size="small">Small</Avatar>
      <Avatar shape="square" colorScheme="red">Small</Avatar>
      <Avatar src='https://bit.ly/dan-abramov' />
      <Avatar text="e" />
    </>`

export const importStatement = `import { Avatar } from '@illa-design/avatar'`

export const packages = {"@illa-design/avatar":"latest"}

<Sandpack code={code} packages={packages} importStatement={importStatement} template="react-ts"/>

Basic usage

<Avatar />

Set Avatar's size

<Avatar size="small">Small</Avatar>

Set Avatar's shape and color

<Avatar shape="saqure" colorScheme="red">Small</Avatar>

Set Avatar's icon

<Avatar icon={<CloseIcon />} />

Set Avatar's image

<Avatar src='https://bit.ly/dan-abramov' />

Set Avatar's text

<Avatar text="e" />

Set Avatar-group's max count

      <AvatarGroup maxCount={2}>
        <Avatar text="I" />
        <Avatar text="L" />
        <Avatar text="L" />
        <Avatar text="A" /> 
      </AvatarGroup>