Avatar

Fallback visible

import { Show, createSignal, onMount } from 'solid-js';
import { Avatar, AvatarFallback, AvatarImage, Button } from '@tile-ui/solid';

const validAvatar =
	'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="64" height="64"%3E%3Crect width="64" height="64" fill="%23f59e0b"/%3E%3Ctext x="32" y="40" text-anchor="middle" font-size="24"%3ES%3C/text%3E%3C/svg%3E';

Use Avatar for image identities with a text fallback that reacts to load errors.

Registry install

pnpm dlx shadcn@latest add @tile-ui/avatar

Package usage

import { Avatar, AvatarImage, AvatarFallback } from '@tile-ui/solid';

<Avatar>
	<AvatarImage src="/avatar.png" alt="Tile UI" />
	<AvatarFallback>TU</AvatarFallback>
</Avatar>

Highlights

Image, fallback, and badge
Group stacking
Three sizes

Registry dependencies

Item	Purpose
`avatar`	Component source and module styles
`core`	Framework-agnostic logic helpers
`styles`	Shared SCSS tokens and globals

API reference

Prop	Type	Default
`size`	`'default' \| 'sm' \| 'lg'`	—

AvatarImage

Prop	Type	Default
`alt`	`string`	—

AvatarFallback

No custom props.

AvatarBadge

No custom props.

AvatarGroup

No custom props.

AvatarGroupCount

No custom props.