@highlight-ui/avatar

@highlight-ui/avatar

Using npm:

npm install @highlight-ui/avatar

Using yarn:

yarn add @highlight-ui/avatar

Using pnpm:

pnpm install @highlight-ui/avatar

In your (S)CSS file:

@import url('@highlight-ui/avatar');

Once the package is installed, you can import the library:

import { Avatar } from '@highlight-ui/avatar';

Usage

import React, { useState } from 'react';
import { Avatar } from '@highlight-ui/avatar';

export default function AlertExample() {
  return <Avatar name="Test Name" src="/img.png" url="/url" />;
}

Props 📜

Prop	Type	Required	Default	Description
animate	boolean	No	false	If true, then Avatar will be animated on mouse hover
containerClassname	string	No		A CSS class applied on component container
imageClassname	string	No		A CSS class to be applied on the image element
name	string	No		Name of the Avatar. If the image is not available, use first letters of the name
avatarSize	number	No		The width and height attributes for the container element
iconSize	number	No		The size attribute for the Icon element
typographyFontSize (deprecated)	TokenisedTypographyProps['fontSize']	No		The fontSize attribute for the Typography element
src	string	No		Image source for the Avatar
url	string	No		Url to go to on click
imageAltText	string	No		Alternative text for an image element
imageLoading	React.ImgHTMLAttributes<HTMLImageElement>['loading']	No		Optional property to indicate how the browser should load images on img tags

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.