# Avatar: Layout

> Avatars never shrink in tight rows. A size class like size-20 scales the initials and badge with it, and long initials never overflow.

Example: https://hextaui.com/docs/avatar/examples/layout
Component docs: https://hextaui.com/docs/avatar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/avatar-layout.json
```

This adds `components/examples/avatar/layout.tsx` with the Avatar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/avatar/layout.tsx"
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarLayout() {
  return (
    <div className="flex flex-col items-start gap-4">
      <div className="flex w-64 max-w-full items-center gap-2 rounded-lg border p-2 text-sm">
        <Avatar>
          <AvatarImage src="/preview/landscape.svg" alt="" />
          <AvatarFallback>AL</AvatarFallback>
        </Avatar>
        <span className="min-w-0 truncate">
          Supercalifragilisticexpialidocious-team-workspace-name
        </span>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Avatar className="size-20">
          <AvatarImage src="/preview/landscape.svg" alt="" />
          <AvatarFallback>KJ</AvatarFallback>
        </Avatar>
        <Avatar className="size-20" shape="square">
          <AvatarFallback>KJ</AvatarFallback>
          <AvatarBadge status="online" />
        </Avatar>
        <Avatar size="sm">
          <AvatarFallback>WWWWWWWW</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}
```

## Props in this example

### Avatar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"xs" \| "sm" \| "default" \| "lg" \| "xl"` | `"default"` | Inherited from the group when omitted. |
| `shape` | `"circle" \| "square"` | `"circle"` | Inherited from the group when omitted. |

### AvatarImage

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | – |  |
| `alt` | `string` | – |  |

### AvatarBadge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"online" \| "away" \| "busy" \| "offline"` | – | Colors the dot and labels it for assistive tech. Without it the badge uses the primary color. |

## More Avatar examples

- [Sizes and shapes](https://hextaui.com/docs/avatar/examples/sizes.md)
- [Loading](https://hextaui.com/docs/avatar/examples/loading.md)
- [Initials](https://hextaui.com/docs/avatar/examples/initials.md)
- [Status](https://hextaui.com/docs/avatar/examples/status.md)
- [Group](https://hextaui.com/docs/avatar/examples/group.md)
- [Linked group](https://hextaui.com/docs/avatar/examples/linked-group.md)
- [Right to left](https://hextaui.com/docs/avatar/examples/rtl.md)