Avatar

<ts-avatar> vv0.4.0

The ts-avatar component.

Open in Storybook for interactive demos.

Preview

<ts-avatar size="md" variant="circle">Content</ts-avatar>

Properties

Property	Attribute	Type	Default	Description
alt	alt	string | undefined	—	Alt text for the avatar image.
color	color	string | undefined	—	Background color for the initials fallback.
name	name	string | undefined	—	Name used to generate initials fallback.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the avatar.
src	src	string | undefined	—	Image URL for the avatar.
variant	variant	"circle" | "square"	'circle'	Shape variant of the avatar.

Slots

Name	Description
*(default)*	Default slot for custom content (e.g., icon).

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The avatar container.
image	The avatar image element.
initials	The initials text element.

ts-avatar::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-avatar size="md" variant="circle">Content</ts-avatar>

React

import { TsAvatar } from '@tessera-ui/react';

<TsAvatar size="md" variant="circle">Content</TsAvatar>