# Avatar: Right to left

> The badge stays on the end corner, which is the left in RTL, and groups overlap from the right.

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

## Add this example

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

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

## Source

```tsx title="components/examples/avatar/rtl.tsx"
"use client"

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
  getInitials,
} from "@/components/ui/avatar"

const people = [
  { name: "Ada Lovelace", image: "/preview/landscape.svg" },
  { name: "Alan Turing", image: "/preview/landscape.svg" },
  { name: "Grace Hopper", image: "/preview/landscape.svg" },
  { name: "Katherine Johnson", image: null },
  { name: "Linus Torvalds", image: null },
  { name: "Margaret Hamilton", image: null },
  { name: "Tim Berners-Lee", image: null },
  { name: "Barbara Liskov", image: null },
]

export function AvatarRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap items-center gap-4">
      <Avatar size="lg">
        <AvatarFallback>{getInitials("محمد علي")}</AvatarFallback>
        <AvatarBadge status="online" />
      </Avatar>
      <AvatarGroup max={4}>
        {people.map((person) => (
          <Avatar key={person.name}>
            {person.image ? <AvatarImage src={person.image} alt="" /> : null}
            <AvatarFallback>{getInitials(person.name)}</AvatarFallback>
          </Avatar>
        ))}
      </AvatarGroup>
    </div>
  )
}
```

## Props in this example

### Avatar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"xs" \| "sm" \| "default" \| "lg" \| "xl"` | `"default"` | 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. |

### AvatarGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `max` | `number` | – | How many items to show, including the count. Values below 2 are raised to 2. |

## 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)
- [Layout](https://hextaui.com/docs/avatar/examples/layout.md)