avatar

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

112

VISIBILITY

Public

PUBLISHED

A year ago

SIZE

20 KB

An avatar component represents an object or entity

1 contributor

Install avatar as a package?

Copied

npm i @bit/nexxtway.react-rainbow.avatar

Set Bit as a scoped registryLearn more

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

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

photo-url

import React from 'react';
import { Avatar } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-p-left_medium rainbow-flex rainbow-align_center">
    <div className="rainbow-m-horizontal_medium">
        <Avatar
            src="images/user/user1.jpg"
            assistiveText="Jose Leandro"
            title="Jose Leandro"
            size="large"
        />
    </div>
    <div className="rainbow-m-horizontal_medium">
        <Avatar
            src="images/user/user2.jpg"
            assistiveText="Tahimi Leon"
            title="Tahimi Leon"
            size="medium"
        />
    </div>
    <div className="rainbow-m-horizontal_medium">
        <Avatar
            src="images/user/user3.jpg"
            assistiveText="Carlos Miguel"
            title="Carlos Miguel"
            size="small"
        />
    </div>
    <div className="rainbow-m-horizontal_medium">
        <Avatar
            src="images/user/user4.jpg"
            assistiveText="Jane Doe"
            title="Jane Doe"
            size="x-small"
        />
    </div>
</div>

fallback user initials

import React from 'react';
import { Avatar } from 'react-rainbow-components';

<div className="rainbow-p-vertical_x-large rainbow-p-left_medium">
    <div className="rainbow-m-horizontal_medium">
        <Avatar assistiveText="Jane Doe" initials="JD" title="Jane Doe" />
    </div>
</div>

fallback user icon

import React from 'react';
import { Avatar } from 'react-rainbow-components';

<div className="rainbow-p-vertical_x-large rainbow-p-left_medium">
    <div className="rainbow-m-horizontal_medium">
        <Avatar
            icon={<img src="icons/user.svg" alt="icon" />}
            assistiveText="user icon"
            title="user icon"
        />
    </div>
</div>

fallback user initials inverse

import React from 'react';
import { Avatar } from 'react-rainbow-components';

const avatarContainerStyles = {
    borderRadius: '0.875rem',
};

<div
    className="rainbow-p-vertical_x-large rainbow-p-left_medium rainbow-background-color_dark-1"
    style={avatarContainerStyles}
>
    <div className="rainbow-m-horizontal_medium">
        <Avatar assistiveText="Jane Doe" initials="JD" title="Jane Doe" initialsVariant="inverse" />
    </div>
</div>

Properties

Name	Type	Default value	Description
src	`string`	`undefined`
initials	`string`	`undefined`
initialsVariant (required)	`string`
title	`string`	`undefined`
icon	`node`	`null`
assistiveText	`string`	`undefined`
src	`string`	`undefined`	The URL for the image. It take precedence over the initials and icon.
initials	`string`	`undefined`	If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter.
icon	`node`	`null`	The fallback icon to show when src and initials are not passed.
size	`'x-small' \| 'small' \| 'medium' \| 'large'`	`'medium'`	The size of the avatar. Valid values are x-small, small, medium, and large. It take precedence over the icon. This value defaults to medium.
initialsVariant	`'default' \| 'inverse'`	`'default'`	The variant of the initials. Only make sense when initials is used.
title	`string`	`undefined`	Displays tooltip text when the mouse moves over the element.
assistiveText	`string`	`undefined`	A description for assistive sreen readers.
className	`string`	`undefined`	A CSS class for the outer element, in addition to the component’s base classes.
style	`object`	`undefined`	An object with custom style applied to the outer element.