avatar
v1.10.0arrow_drop_down



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>
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. |