Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Avatar

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Use this component to display an user's avatar. The avatar can be displayed with an image, initials, or an icon.

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

Size

In Kubit Design System, users have the freedom to generate variants (or sizes) for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the size prop.

12345678910
<Avatar size={'SMALL'} dot={{ variant: 'WITH_BORDER', size: 'MEDIUM' }} initials={{ content: 'HA' }} backgroundColor={'COLOR_WHITE'} />
<Avatar
  size={'MEDIUM'}
  dot={{ variant: 'WITH_BORDER', size: 'MEDIUM' }}
  icon={{ icon: 'ICON_PLACEHOLDER' }}
  initials={{ content: 'HA' }}
  backgroundColor={'COLOR_WHITE'}
/>
<Avatar size={'LARGE'} dot={{ variant: 'WITH_BORDER', size: 'MEDIUM' }} initials={{ content: 'HA' }} backgroundColor={'COLOR_WHITE'} />
<Avatar

Content type

The avatar can display an image, initials, or an icon. The image prop is used to display an image, the initials prop is used to display initials, and the icon prop is used to display an icon.

12345678910
<Avatar
  size={'LARGE'}
  dot={{ variant: 'WITH_BORDER', size: 'MEDIUM' }}
  icon={{ icon: 'ICON_PLACEHOLDER' }}
  backgroundColor={'COLOR_WHITE'}
/>
<Avatar
  size={'LARGE'}
  dot={{ variant: 'WITH_BORDER', size: 'MEDIUM' }}
  initials={{ content: 'HA' }}

Notifications

The avatar can have a badge for notifications. dot must be configured for this purpose.

123456
<Avatar
  size={'LARGE'}
  dot={{ variant: 'WITH_BORDER', size: 'MEDIUM', number: 2, maxNumber: 9 }}
  initials={{ content: 'HA' }}
  backgroundColor={'COLOR_WHITE'}
/>
TabsAccessibility
AvatarDesign Specs