Avatar

An image element with a fallback for representing the user.

Component Source Primitive API Reference

Preview ​

Installation ​

bash
npx sigma-ui add avatar

Examples ​

Basic ​

Image component with just src prop.

Glow ​

Prop glow: boolean - adds glowing effect to the image.

Custom fallback ​

Slot #fallback - let's you provide custom fallback content.

If you don't provide a fallback and the image fails to load, it will render default "profile" icon.

API ​

Props ​

src ​

  • Type: string

alt ​

  • Type: string
  • Default: 'image'

The alt text for the image.

glow ​

  • Type: boolean
  • Default: false

Adds a glowing effect to the image.

class ​

  • Type: string

Additional CSS classes to apply to the image container.

shape ​

  • Type: 'rounded' | 'circle'
  • Default: 'rounded'

Determines the shape of the image.

Slots ​

fallback ​

Allows you to provide a custom fallback content. By default, it renders image icon with "no photo" text under it.

Edit this page on GitHub