@highlight-ui/avatar
v6.4.5
Published
Avatar UI component for the Personio UI Library
Downloads
4,886
Maintainers
Keywords
Readme
@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.