Avatar

Fallback

When src or srcSet are missing or fail to load, a fallback will be displayed. By default this will show the user initials, based on the name. Optionally you can suppy your own content using the default children. This can be used to display icons or even pass a Next.js image component.

import React from 'react';
import { Avatar } from '@skeletonlabs/skeleton-react';
import { Skull } from 'lucide-react';

export const Page: React.FC = () => {
  return (
    <div className="flex gap-4">
      <Avatar name="John Doe"></Avatar>
      <Avatar name="icon" background="preset-filled-primary-500">
        <Skull size={24} />
      </Avatar>
    </div>
  );
};

Filters

Avatars can implement SVG Filters using arbitrary Tailwind syntax.

import React from 'react';
import { Avatar } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  return (
    <>
      {/* Image */}
      <Avatar src="https://i.pravatar.cc/150?img=48" name="filtered" imageClasses="[filter:url(#Apollo)]" />

      {/* SVG Filter */}
      {/* Ideally you have as single instance of this in your application. */}
      <svg id="svg-filter-apollo" className="absolute -left-full w-0 h-0">
        <filter id="Apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
          <feColorMatrix
            values="0.8 0.6 -0.4 0.1 0,
          0 1.2 0.05 0 0,
          0 -1 3 0.02 0,
          0 0 0 50 0"
            result="final"
            in="SourceGraphic"
          ></feColorMatrix>
        </filter>
      </svg>
    </>
  );
};

Style Attribute

Use the style prop to implement custom styles on the parent <figure> element.

import React from 'react';
import { Avatar } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  return <Avatar name="Jane Doe" style={{ backgroundColor: '#bada55', color: 'black' }} />;
};

Anatomy

<Avatar>

image

<img>

fallback

<span>

API Reference

Property	Type	Description
`src`	string	The source of the avatar image.
`srcSet`	string	The source set of the avatar image.
`name` *	string	Provide a name or username for the avatar.
`base`	string	Set base styles.
`background`	string	Set background styles.
`size`	string	Set size styles.
`font`	string	Set font styles.
`border`	string	Set border styles.
`rounded`	string	Set border radius styles.
`shadow`	string	Set shadow styles.
`classes`	string	Provide arbitrary CSS classes.
`imageBase`	string	Set avatar image base styles.
`imageClasses`	string	Provide avatar image arbitrary CSS classes.
`fallbackBase`	string	Set base classes for the fallback element.
`fallbackClasses`	string	Provide arbitrary CSS classes to fallback element.
`ids`		The ids of the elements in the avatar. Useful for composition.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onStatusChange`		Functional called when the image loading status changes.
`children`	ReactNode
`style`