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