## Overview [#overview]
The `Avatar` component displays user profile images with automatic fallback to initials or custom content when images fail to load, providing consistent user representation across your application.
## Usage [#usage]
```tsx showLineNumbers
import { Avatar, AvatarFallback, AvatarImage } from "@tilt-legal/cubitt-components/primitives";
```
```tsx showLineNumbers
IW
```
Need to display a group of avatars? Check out the
[AvatarGroup](/primitives/avatar-group) component.
***
## Examples [#examples]
### Basic [#basic]
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
CC
);
}
```
### Fallback [#fallback]
Display fallback content when the image fails to load or is not available.
```tsx
import { Avatar, AvatarFallback } from "@tilt-legal/cubitt-components/primitives";
import { AvatarFallback, AvatarImage, AvatarIndicator } from "@tilt-legal/cubitt-components/primitives";
import {
User } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Component() {
return (
IW
DP
);
}
```
### With Indicator [#with-indicator]
Add indicators such as verification badges to avatars.
```tsx
import { Avatar } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
IWCC
);
}
```
### With Status [#with-status]
Display user online/offline status using the `AvatarStatus` component.
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
AvatarIndicator,
AvatarStatus,
} from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
IWCCSLIW
);
}
```
### With Badge [#with-badge]
Combine avatars with badges to show notification counts or other indicators.
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
import {
Avatar,
AvatarFallback,
AvatarImage,
AvatarIndicator,
} from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
CC
6
SL
3
);
}
```
### Sizes [#sizes]
Avatars can be sized using Tailwind's sizing utilities.
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
AvatarIndicator,
AvatarStatus,
} from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
IWCCSLIWCC
);
}
```
### Group [#group]
Display multiple avatars in an overlapping group.
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
Button,
} from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
IWCCSLIW
);
}
```
### Trusted By [#trusted-by]
A social proof component showing avatars with text.
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
IWCCSLIW
Trusted by 100K+{" "}
users.
);
}
```
***
## API Reference [#api-reference]
### Avatar [#avatar]
The root container for the avatar component.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | - | Additional CSS classes |
### AvatarImage [#avatarimage]
Displays the user's profile image.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ------------------------------ |
| `src` | `string` | - | Image source URL |
| `alt` | `string` | - | Alternative text for the image |
| `className` | `string` | - | Additional CSS classes |
### AvatarFallback [#avatarfallback]
Content to display when the image fails to load or is unavailable.
| Prop | Type | Default | Description |
| ----------- | ----------------- | ------- | ------------------------------------------- |
| `children` | `React.ReactNode` | - | Fallback content (usually initials or icon) |
| `className` | `string` | - | Additional CSS classes |
### AvatarIndicator [#avatarindicator]
Container for indicators like status badges or notification counts.
| Prop | Type | Default | Description |
| ----------- | ----------------- | ------- | -------------------------------------- |
| `children` | `React.ReactNode` | - | Indicator content |
| `className` | `string` | - | Additional CSS classes for positioning |
### AvatarStatus [#avatarstatus]
Displays a status indicator (online, offline, busy, away).
| Prop | Type | Default | Description |
| ----------- | ------------------------------------------- | ---------- | ---------------------- |
| `variant` | `"online" \| "offline" \| "busy" \| "away"` | `"online"` | Status variant |
| `className` | `string` | - | Additional CSS classes |