Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Avatar

v.1.0.0 | Saturn

Usage

import { Avatar } from '@kubit-ui-web/react-components'
123456
<Avatar
  size={'MEDIUM'}
  dot={{ variant: 'WITH_BORDER', size: 'MEDIUM', number: 2, maxNumber: 9 }}
  initials={{ content: 'HA' }}
  backgroundColor={'COLOR_WHITE'}
/>

Props

Let's delve into the versatility of the avatar component by examining all its avalaible props.

| Property | Type | Default | Description | | ------------------------- | --------------------- | ------------- | ------------------------------------------------------ | | size [&TAG_CODE Required] | String | - | Size of the Avatar | | dot | IDot | - | Dot component | | image | String | - | Url of the image to show | | backgroundColor | AvatarBackgroundColor | COLOR_DEFAULT | Background color of the container | | icon | IElementOrIcon | - | Icon showed | | initials | AvatarInitialsType | - | Initials showed | | link | AvatarLinkType | - | Value to make to show Avatar as a link | | number | Number | - | Value showed inside the Dot | | maxLengthInitials | Number | 2 | Maximun number of initials | | onClick | MouseEventHandler | - | Function called when user clicks on the avatar | | aria-label | String | - | Value for aria-label property | | aria-labelledby | String | - | Value for aria-labelledby property | | aria-describedby | String | - | Value for aria-describedby property | | aria-hidden | String | - | Value for aria-hidden property | | dataTestId | String | - | Id for testing | | cts | AvatarSizeStylesType | - | Modify styles for the default version of the component |

AvatarDesign Specs
AvatarStyling API