# Avatar Avatar is a visual representation of a user, business, or entity. It provide quick visual identification in headers, comments, chat messages, and user profiles. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--introduction ## Variants documented in Storybook - BaseAvatar: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--baseavatar - StatusAvatar: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--statusavatar - AvatarGroup: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--avatargroup - ProfileAvatar: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--profileavatar ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Avatar. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Avatar Group — Group Variants HTML: ```html

``` React: ```jsx import React from 'react'; const AvatarExample1Demo = () => ( <> {/* Variant: Avatar Group - Three Members */}

); export default AvatarExample1Demo; ``` Angular: ```html

``` ### 2. Avatar Group — Group Sizes HTML: ```html

``` React: ```jsx import React from 'react'; const AvatarExample2Demo = () => ( <> {/* Variant: Avatar Group - XS */}

{/* Variant: Avatar Group - S */}

{/* Variant: Avatar Group - M */}

); export default AvatarExample2Demo; ``` Angular: ```html

``` ### 3. Avatar Group — Collapsed Groups HTML: ```html

Max 2

Max 3

Max 4

Max 5

``` React: ```jsx import React from 'react'; const AvatarExample3Demo = () => ( <>

{/* Max 2 */}

Max 2

{/* Max 3 */}

Max 3

{/* Max 4 */}

Max 4

{/* Max 5 */}

Max 5

); export default AvatarExample3Demo; ``` Angular: ```html

Max 2

Max 3

Max 4

Max 5

``` ### 4. Base Avatar — Initials Scaling HTML: ```html

2XL

3XL

``` React: ```jsx import React from 'react'; const AvatarExample4Demo = () => ( <> {/* Variant: Initial Avatar - XS */}

{/* Variant: Initial Avatar - S */}

{/* Variant: Initial Avatar - M */}

{/* Variant: Initial Avatar - L */}

{/* Variant: Initial Avatar - XL */}

{/* Variant: Initial Avatar - 2XL */}

2XL

{/* Variant: Initial Avatar - 3XL */}

3XL

); export default AvatarExample4Demo; ``` Angular: ```html

2XL

3XL

``` ### 5. Base Avatar — Icon Scaling HTML: ```html

``` React: ```jsx import React from 'react'; const AvatarExample5Demo = () => ( <> {/* Variant: Icon Avatar - XS */}

person

{/* Variant: Icon Avatar - S */}

person

{/* Variant: Icon Avatar - M */}

person

{/* Variant: Icon Avatar - L */}

person

{/* Variant: Icon Avatar - XL */}

person

{/* Variant: Icon Avatar - 2XL */}

person

{/* Variant: Icon Avatar - 3XL */}

person

); export default AvatarExample5Demo; ``` Angular: ```html

``` ### 6. Base Avatar — Image Scaling HTML: ```html

``` React: ```jsx import React from 'react'; const AvatarExample6Demo = () => ( <> {/* Variant: Image Avatar - XS */}

{/* Variant: Image Avatar - S */}

{/* Variant: Image Avatar - M */}

{/* Variant: Image Avatar - L */}

{/* Variant: Image Avatar - XL */}

{/* Variant: Image Avatar - 2XL */}

{/* Variant: Image Avatar - 3XL */}

); export default AvatarExample6Demo; ``` Angular: ```html

``` ### 7. Introduction — Introduction HTML: ```html

Components

Avatar

Avatar is a visual representation of a user, business, or entity. It provide quick visual identification in headers, comments, chat messages, and user profiles.

Implementation Showcase

Visual demonstration of the four primary avatar configurations supported by the design system.

Base Avatars

Status Avatars

Avatar Groups

Profile Avatars

CSS Class Reference

Avatar Sizes

3-Extra Large ux4g-avatar-3xl

2-Extra Large ux4g-avatar-2xl

Extra Large ux4g-avatar-xl

Large ux4g-avatar-l

Medium [Default] ux4g-avatar-m

Small ux4g-avatar-s

Extra Small ux4g-avatar-xs

Status Badge Sizes

Large ux4g-badge-l

Medium [Default] ux4g-badge-m

Small ux4g-badge-s

Profile Badge Sizes

3-Extra Large ux4g-badge-profile-3xl

2-Extra Large ux4g-badge-profile-2xl

Extra Large ux4g-badge-profile-xl

Large [Default] ux4g-badge-profile-l

Status & Badge Variants

Online Status ux4g-badge-dot-success

Offline Status ux4g-badge-dot-neutral

Busy / Busy Icon ux4g-badge-icon-warning

Success Icon ux4g-badge-icon-success

Error Icon ux4g-badge-icon-danger

Profile Verify Icon ux4g-badge-icon-primary

``` React: ```jsx import React from 'react'; const AvatarExample7Demo = () => ( <>

Components

Avatar

Avatar is a visual representation of a user, business, or entity. It provide quick visual identification in headers, comments, chat messages, and user profiles.