@highlight-ui/avatar NPM | npm.io

6.4.4 • Published 3 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 months ago

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

@highlight-ui/icon @highlight-ui/typography @highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 personio-componants @zalastax/nolb-_hig @highlight-ui/sandbox-searchable-sub-label-select @highlight-ui/select @highlight-ui/sandbox-multiselect-tag

3 months ago

5 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

8 months ago

10 months ago

9 months ago

10 months ago

10 months ago

7 months ago

7 months ago

7 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago