Avatar

Avatars are used to represent users or entities visually. They can display images or fallback text with automatically extracted initials. They help personalize the interface and make it easier to identify users.

Example

Props

Prop	Type	Default value	Description
Prop src	Type string	Default value undefined	Description URL of the avatar image. If not provided, text fallback is used.
Prop srcSet	Type string	Default value undefined	Description Responsive image srcset attribute for different screen densities
Prop text	Type string	Default value -	Description The text to display as initials in the avatar fallback. Required. Automatically extracts initials from the text.
Prop textSize	Type "md" \| "sm"	Default value "sm"	Description The font size of the text fallback. Defaults to "sm".

Quick start

import { Avatar } from '@clickhouse/click-ui'

function MyAvatar() {
return (
  <Avatar
    text="John Doe"
    textSize="md"
  />
)
}

Text: Often displayed alongside avatars for user names.
Badge: Can be used with avatars to show status indicators.
Container: For organizing avatars in lists or grids.

Common use cases

User avatar

John Doe

import { Avatar, Text, Container } from '@clickhouse/click-ui'

function UserAvatar() {
return (
  <Container orientation='horizontal' gap='sm' alignItems='center'>
    <Avatar
      text="John Doe"
      textSize="md"
    />
    <Text>John Doe</Text>
  </Container>
)
}

Profile avatar

John Doe

Software Engineer

import { Avatar, Text, Container } from '@clickhouse/click-ui'

function ProfileAvatar() {
return (
  <Container orientation='vertical' gap='sm' alignItems='center'>
    <Avatar
      src="https://example.com/avatar.jpg"
      text="John Doe"
      textSize="md"
    />
    <Text size='lg' weight='bold'>John Doe</Text>
  </Container>
)
}

Avatar with Badge

Online

import { Avatar, Badge, Container } from '@clickhouse/click-ui'

function AvatarWithBadge() {
return (
  <Container orientation='horizontal' gap='xs' alignItems='center'>
    <Avatar
      text="John Doe"
      textSize="md"
    />
    <Badge text="Online" state="success" size="sm" />
  </Container>
)
}

Badge Big stat