Avatar

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeAvatarExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeAvatarExample/></NativeScope>}

Sizes

Four sizes via the size prop - xs (20px) through lg (36px). The initials type scale follows the container.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="avatar" id="sizes"/>}

Initial tints

Initials render on a neutral or blue surface via the color prop.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="avatar" id="tints"/>}

Photo

Pass src and alt for a photo avatar. Initials act as the fallback while the image loads or if it fails.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="avatar" id="photo"/>}