@paprika/avatar

@paprika/avatar

Description

Avatar component represents an object or entity and displays initials or icon.

Installation

yarn add @paprika/avatar

or with npm:

npm install @paprika/avatar

Props

Avatar

Prop	Type	required	default	Description
children	node	false	null	Avatar content. It can be initial as a string or icon
backgroundColor	string	false	null	Background color of the Avatar
color	string	false	null	Color for the initial or icon
isRound	bool	false	false	Shape of the Avatar
size	[ Avatar.types.size.SMALL, Avatar.types.size.MEDIUM, Avatar.types.size.LARGE]	false	Avatar.types.size.LARGE	Size of Avatar

Avatar

Avatar component represents an object or entity and displays initials or icon.

Usage

By default, Avatar component sets the background and text color using the getAvatarColorfunction with the children props value as the parameter.

import Avatar from "@paprika/avatar";

<Avatar>Terry Fox</Avatar>;

Access getAvatarColors

import Avatar from "@paprika/avatar";
import { getAvatarColors } from "@paprika/avatar/lib/helpers";

const color = getAvatarColors("Terry Fox");

<Avatar backgroundColor={color.backgroundColor} color={color.fontColor}>
  Terry Fox
</Avatar>;

Set custom size, background and text color

import Avatar from "@paprika/avatar";

<Avatar backgroundColor="black" color="white" size="small">
  Terry Fox
</Avatar>;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG