Avatar - Skeleton

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

export const Page: React.FC<any> = () => {
	const imgSrc =
		'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';

	return <Avatar src={imgSrc} alt="skeleton" />;
};

Fallback

When the src prop is undefined, default children will show. This can be used for initials, icons, or fallback images.

<Avatar>SK</Avatar>

<Avatar>💀</Avatar>

API Reference

AvatarProps

This is an example caption.
Name	Type	Description
`src`	string	Set avatar image source URL.
`alt`	string	Set avatar image Alt text.
`filter`	string	Set avatar image filter name. such as "#Apollo".
`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.
`children`

AvatarProps

node_modules/@skeletonlabs/skeleton-react/src/components/Avatar/types.ts

{
  "src": {
    "description": "Set avatar image source URL.",
    "type": "string"
  },
  "alt": {
    "description": "Set avatar image Alt text.",
    "type": "string"
  },
  "filter": {
    "description": "Set avatar image filter name. such as \"#Apollo\".",
    "type": "string"
  },
  "base": {
    "description": "Set base styles.",
    "type": "string"
  },
  "background": {
    "description": "Set background styles.",
    "type": "string"
  },
  "size": {
    "description": "Set size styles.",
    "type": "string"
  },
  "font": {
    "description": "Set font styles.",
    "type": "string"
  },
  "border": {
    "description": "Set border styles.",
    "type": "string"
  },
  "rounded": {
    "description": "Set border radius styles.",
    "type": "string"
  },
  "shadow": {
    "description": "Set shadow styles.",
    "type": "string"
  },
  "classes": {
    "description": "Provide arbitrary CSS classes.",
    "type": "string"
  },
  "imageBase": {
    "description": "Set avatar image base styles.",
    "type": "string"
  },
  "imageClasses": {
    "description": "Provide avatar image arbitrary CSS classes.",
    "type": "string"
  },
  "children": {
    "$ref": "#/definitions/React.ReactNode"
  }
}