Avatar

A visual representation of a user or entity.

import { ... } from '@corndev/ui'

HTML

No JavaScript required — these classes are the whole component.

<img class="corn-avatar" data-size="md" data-shape="circle" src="/me.jpg" alt="Ada" />

Classes

Class
`.corn-avatar`

Attributes

Attribute	Values
`data-size`	`xs\|sm\|md\|lg\|xl`
`data-shape`	`circle\|square`

Vanilla JS

Optional. createAvatar only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createAvatar } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createAvatar(el, { /* options */ });

Options

Option	Type	Default
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`
`shape`	`'circle'\|'square'`	`'circle'`

React

Avatar — from @corndev/ui-react.

The React version renders the image or initials for you via src/alt/initials. The vanilla version only applies sizing and shape — supply the <img> or initials text yourself.

Props

Prop	Type	Default	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`
`shape`	`'circle'\|'square'`	`'circle'`
`src`	`string`	`undefined`	Image URL. When set, renders an `<img>`.
`alt`	`string`	`''`	Alt text for the image.
`initials`	`React.ReactNode`	`undefined`	Fallback shown when `src` is absent.
`className`	`string`	`undefined`	Merged with the Corn UI classes.

Default

<Avatar initials="JD" />

Sizes

<Avatar size="xs" initials="XS" />
<Avatar size="sm" initials="SM" />
<Avatar size="md" initials="MD" />
<Avatar size="lg" initials="LG" />
<Avatar size="xl" initials="XL" />

Shape

<Avatar shape="circle" initials="CI" />
<Avatar shape="square" initials="SQ" />

With image

<Avatar src="/avatar.jpg" alt="User avatar" size="lg" />