# Avatar: Status

> `<AvatarBadge />` sits on the rim at every size and shape. Set `status` for a colored dot with an accessible label, or pass an icon. Changing the status plays a single pulse.

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

## Add this example

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

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

## Source

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

import * as React from "react"
import { IconCheck } from "@tabler/icons-react"

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
  type AvatarStatus,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

const sizes = ["xs", "sm", "default", "lg", "xl"] as const
const shapes = ["circle", "square"] as const
const statuses: AvatarStatus[] = ["online", "away", "busy", "offline"]

export function AvatarStatusDemo() {
  const [index, setIndex] = React.useState(0)
  const status = statuses[index]

  return (
    <div className="flex flex-col gap-4">
      {shapes.map((shape) => (
        <div key={shape} className="flex flex-wrap items-center gap-3">
          {sizes.map((size) => (
            <Avatar key={size} size={size} shape={shape}>
              <AvatarImage src="/preview/landscape.svg" alt="" />
              <AvatarFallback>GH</AvatarFallback>
              <AvatarBadge status={status} />
            </Avatar>
          ))}
          <Avatar size="lg" shape={shape}>
            <AvatarFallback>AT</AvatarFallback>
            <AvatarBadge>
              <IconCheck />
            </AvatarBadge>
          </Avatar>
        </div>
      ))}
      <div className="flex items-center gap-3">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setIndex((index + 1) % statuses.length)}
        >
          Next status
        </Button>
        <span className="text-sm text-muted-foreground">{status}</span>
      </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)
- [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)
- [Right to left](https://hextaui.com/docs/avatar/examples/rtl.md)