Avatar

<bh-avatar> | BharatAvatar

The Avatar component displays user profile images with various shapes and sizes. It automatically handles missing images by providing default avatars.

Open in

Basic Usage

Preview

Open in

HTML

<bh-avatar></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar/>
);
}

export default App;

Sizes

The Avatar component supports the below three predefined sizes:

Preview

Open in

HTML

<bh-avatar size="small"></bh-avatar>
<bh-avatar size="medium"></bh-avatar>
<bh-avatar size="large"></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar size="small"/>
    <BharatAvatar size="medium"/>
    <BharatAvatar size="large"/>
);
}

export default App;

Shapes

The Avatar component supports two shapes:

Preview

Open in

HTML

<bh-avatar shape="square" ></bh-avatar>
<bh-avatar shape="circle"></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar shape="square"/>
    <BharatAvatar shape="circle"/>
);
}

export default App;

Shape	Description
square	Square avatar with rounded corners
circle	Circular avatar

Avatar with Initials

If no image is provided, and the initials prop is set, the avatar will display the initials with a random background color and auto-scaled text size.

Preview

Open in

HTML

<bh-avatar initials="Bharat UI" size="small"></bh-avatar>
<bh-avatar initials="Bharat UI" size="medium"></bh-avatar>
<bh-avatar initials="Bharat UI" size="large"></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar initials="Bharat UI"/>
);
}

export default App;

Custom Styling

Preview

Open in

HTML

    <bh-avatar
    width="100px"
    height="100px"
    borderradius="0"
    border="4px solid cyan">
  </bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar  width="100px"
    height="100px"
    borderradius="0"
    border="4px solid cyan"/>
);
}

export default App;

With Specific Default Avatar

Preview

Open in

HTML

<bh-avatar key="1"></bh-avatar>
<bh-avatar key="2"></bh-avatar>
<bh-avatar key="3"></bh-avatar>
<bh-avatar key="4"></bh-avatar>
<bh-avatar key="5"></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return ( <>
    <BharatAvatar key="1"/>
    <BharatAvatar key="2"/>
    <BharatAvatar key="3"/>
    <BharatAvatar key="4"/>
    <BharatAvatar key="5"/>
    </>
);
}

export default App;

With Custom Image

Preview

Open in

HTML

<bh-avatar avatarURL="https://picsum.photos/seed/picsum/100" size="large"></bh-avatar>

React

import React from 'react';
import { BharatAvatar } from 'bharat-ui/react/components/avatar';

function App() {
return (
    <BharatAvatar  avatarURL="https://picsum.photos/seed/picsum/100"/>
);
}

export default App;

Properties

Property	Type	Description
size	string	Avatar size ("small", "medium", "large")
shape	string	Shape of the avatar ("square", "circle")
avatarURL	string	Avatar image URL - loads default images incase no avatarURL attribute is provided
width	string	Custom width (overrides size)
height	string	Custom height (overrides size)
borderRadius	string	Custom border radius (overrides shape)
border	string	Style border (e.g., 2px solid red)
key	number	Loads specific default animated avatar
initials	string	Generate initials based avatar, example - initials="Bharat UI" will render an avatar with initials “BU”
initialsTextSize	string	Font size for initials
backgroundColor	string	Background color for initials-based Avatar