avatar

v4.15.0

STATUS

Passing

DOWNLOADS

173

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

The Avatar component is used to represent users. And should only be used for users.

1 contributor

Install avatar as a package?

Copied

npm i @bit/segmentio.evergreen.avatar

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Properties

Name	Type	Default value	Description
src	`string`		The src attribute of the image. When it’s not available, render initials instead.
size	`number`	`24`	The size of the avatar.
name	`string`		The name used for the initials and title attribute.
hashValue	`string`		The value used for the hash function. The name is used as the hashValue by default. When dealing with anonymous users you should use the id instead.
isSolid	`bool`	`false`	When true, render a solid avatar.
color	`string`	`'automatic'`	The color used for the avatar. When the value is `automatic`, use the hash function to determine the color.
getInitials	`function`	`globalGetInitials`	Function to get the initials based on the name.
forceShowInitials	`bool`	`false`	When true, force show the initials. This is useful in some cases when using Gravatar and transparent pngs.
sizeLimitOneCharacter	`number`	`20`	When the size is smaller than this number, use a single initial for the avatar.
theme (required)	`object`		Theme provided by ThemeProvider.