Cards & Layout

Avatar

Initials fallback with optional image source and four sizes.

Element: <span>
Module: @basenative/components
Function: renderAvatar

Quick start

Import the render function and call it from your server template.

import { renderAvatar } from '@basenative/components';

renderAvatar({ name: 'Alice Johnson', size: 'lg' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Sizes

Initials fallback derived from the name; supports an optional src for a real image.

Live render

AJ BS CD DL

Source

renderAvatar({ name: 'Alice Johnson', size: 'sm' })
renderAvatar({ name: 'Bob Smith' })
renderAvatar({ name: 'Carol Davis', size: 'lg' })
renderAvatar({ name: 'Dan Lee', size: 'xl' })

Live initials

Type a name to see the initials recompute.

Live render

Name

Source

const initials = (n) =>
  (n || '?').split(/\s+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('').toUpperCase() || '?';

const name = signal('Ada Lovelace');

// renderAvatar() is a server helper; in the browser the signal drives the markup directly.
effect(() => {
  slot.innerHTML =
    '<span data-bn="avatar" data-size="xl" data-shape="circle" role="img" aria-label="' + name() + '">' +
    '<span data-bn="avatar-initials">' + initials(name()) + '</span>' +
    '</span>';
});

input.oninput = (e) => name.set(e.target.value);

Options

Arguments accepted by renderAvatar().

renderAvatar option reference
Option	Type	Default	Description
`name`	`string`	`—`	Used to derive initials.
`src`	`string`	`''`	Image source URL.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Diameter preset.