Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

avatar

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
96
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
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
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
NameTypeDefault valueDescription
src
stringundefined
initials
stringundefined
initialsVariant
(required)
string
title
stringundefined
icon
nodenull
assistiveText
stringundefined
src
stringundefined

The URL for the image. It take precedence over the initials and icon.

initials
stringundefined

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
nodenull

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
stringundefined

Displays tooltip text when the mouse moves over the element.

assistiveText
stringundefined

A description for assistive sreen readers.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.