Avatar
Avatar can be used to represent users, collaborators or objects.
You can render image, icon or text inside Avatars.
Usage
The Avatar component can be imported using
import { Avatar } from '@tail-kit/tail-kit'
Basic
U
USER
U
K
K
+2
K
+2
Editable Example
+6
Editable Example
| Name | Description | Default Value |
|---|---|---|
| alt | Add alternating text describing the image if you are using src prop string | undefined | -- |
| children | Render string inside Avatar string | undefined | -- |
| className | Customize Avatar styles using className string | undefined | -- |
| icon | Render custom icon inside Avatar ReactElement<any, string | JSXElementConstructor<any>> | undefined | -- |
| shape | The shape of Avatar "circle" | "square" | undefined | circle |
| size | The size of Avatar "large" | "default" | "small" | undefined | -- |
| src | Image source address to render inside Avatar string | undefined | -- |
| style | Customize Avatar styles using style prop CSSProperties | undefined | -- |
| Name | Description | Default Value |
|---|---|---|
| children | Render Avatars in AvatarGroup as children ReactNode | -- |
| excessAvatarClassName | Customize style of excess avatar string | undefined | -- |
| excessAvatarStyle | Customize style of excess avatar CSSProperties | undefined | -- |
| maxCount | Maximum number of Avatars to show number | undefined | -- |
| maxPopoverPlacement | The placement of excess avatar Popover "top" | "bottom" | undefined | top |
| size | The size of the avatar "large" | "default" | "small" | undefined | default |