---
title: Avatar
description: Avatars in Click UI are used for representing users or entities visually. They can display images or fallback text with automatically extracted initials.
category: Display
related: [Text, Badge, Container]
commonPatterns: [user-avatar, profile-avatar, avatar-with-badge]
---

Source: https://clickhouse.design/click-ui/avatar

# 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                                                                                                      |
| -------- | --------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------- |
| src      | `string`                                | `undefined`   | URL of the avatar image. If not provided, text fallback is used.                                                 |
| srcSet   | `string`                                | `undefined`   | Responsive image srcset attribute for different screen densities                                                 |
| text     | `string`                                | `-`           | The text to display as initials in the avatar fallback. Required. Automatically extracts initials from the text. |
| textSize | "md" \| "sm"
          "md" \| "sm" | `"sm"`        | The font size of the text fallback. Defaults to "sm".                                                            |

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

<Avatar
text="John Doe"
textSize="md"
/>

<Avatar
src="https://example.com/avatar.jpg"
text="John Doe"
textSize="sm"
/>
```

## Quick start

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

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

## Related components

- **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

```tsx
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

```tsx
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

```tsx
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>
)
}
```