Avatar

Avatars display user profile image, initials or fallback icon.

Importing

To use the avatar component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/avatar";

register(); // Now the avatar component is ready to use!

Web (Option 2)

import { registerAvatar } from "@tapsioss/web-components";

registerAvatar(); // Now the avatar component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/avatar/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Avatar } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-avatar></tapsi-avatar>

React

<Avatar />

Properties

Name	Attribute Name	Description	Type	Default Value
image	image	The image source to use for the avatar.	string	""
label	label	A label to use to describe the avatar to assistive devices.	string	""
alt	alt	The alternative text description of the avatar image, used for accessibility.	string	""
loading	loading	Indicates how the browser should load the image.	"eager" | "lazy"	"eager"
size	size	The size of the avatar.	| "xs" | "sm" | "md" | "lg" | "xlg" | "xxlg"	"md"

Slots

Name	Value	Description
DEFAULT	-	The default slot to use when image is not present.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { AvatarSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/avatar";

React

// Option 1
import { AvatarSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Avatar";