@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.