Avatar

A visual representation of a user or entity.

<script lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "coss-svelte";
</script>

<Avatar>
	<AvatarImage
		alt="Luke Tracy"
		src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
	/>
	<AvatarFallback>LT</AvatarFallback>
</Avatar>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Avatar, AvatarFallback, AvatarImage } from "coss-svelte";

Anatomy

Avatar
AvatarFallback
AvatarImage

API Reference

Avatar

A visual representation of a user or entity.

Prop	Type	Default	Description
`src`	`string`	`""`	Image source for the avatar.
`alt`	`string`	-	Accessible text for the avatar image.
`fallback`	`string`	`""`	Text shown when the avatar image is unavailable.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Avatar.Root.

AvatarFallback

Renders fallback content when primary media is unavailable.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Avatar.Fallback.

AvatarImage

Renders the primary image for the parent component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Avatar.Image.

Implementation Details

Status: Stable
Foundation: bits
Category: Content & Display
Particles: 14