104Get started
HextaUI

Empty: Avatar

The default EmptyMedia variant only centers its content, so any avatar, badge or illustration fits.

LH
Lena is offline
Leave a message and she’ll see it when she’s back.
import { Avatar, AvatarBadge, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function EmptyAvatar() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>
          <Avatar size="lg">
            <AvatarFallback>LH</AvatarFallback>
            <AvatarBadge status="offline" />
          </Avatar>
        </EmptyMedia>
        <EmptyTitle>Lena is offline</EmptyTitle>
        <EmptyDescription>
          Leave a message and she’ll see it when she’s back.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button size="sm">Leave a message</Button>
      </EmptyContent>
    </Empty>
  )
}

Add this example

This adds the example as components/examples/empty/avatar.tsx, together with the Empty component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-avatar.json

To add only the component, follow the Empty installation.

More Empty examples

See them all, with keyboard support and accessibility notes, on the Empty page.

Related components