@teste-ui/avatar

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

Installation

1yarn add @teste-ui/avatar
2
3# or
4
5npm i @teste-ui/avatar

Import components

1import { Avatar, AvatarGroup } from "@teste-ui/avatar"

Basic Usage

Simply import the Avatar component and pass it the image src and name of the user in the avatar.

1<Avatar src="john-doe.png" name="John doe" />

Stack Avatars in a group by using the AvatarGroup component

1<AvatarGroup size="md" max={2}>
2  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
3  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
4  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
5  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
6  <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
7</AvatarGroup>