Avatar Status

1import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 
3export default function AvatarWithStatusDemo() {
4  return (
5    <div className="flex items-center gap-3">
6      {/* Online */}
7      <div className="relative">
8        <Avatar>
9          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
10          <AvatarFallback>CN</AvatarFallback>
11        </Avatar>
12        <div className="absolute right-0 bottom-0 size-2 rounded-full bg-green-500 ring-2 ring-background" />
13      </div>
14 
15      {/* DND */}
16      <div className="relative">
17        <Avatar>
18          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
19          <AvatarFallback>CN</AvatarFallback>
20        </Avatar>
21        <div className="absolute right-0 bottom-0 size-2 rounded-full bg-red-500 ring-2 ring-background" />
22      </div>
23 
24      {/* Busy */}
25      <div className="relative">
26        <Avatar>
27          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
28          <AvatarFallback>CN</AvatarFallback>
29        </Avatar>
30        <div className="absolute right-0 bottom-0 size-2 rounded-full bg-yellow-500 ring-2 ring-background" />
31      </div>
32 
33      {/* Offline */}
34      <div className="relative">
35        <Avatar>
36          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
37          <AvatarFallback>CN</AvatarFallback>
38        </Avatar>
39        <div className="absolute right-0 bottom-0 size-2 rounded-full border-2 border-muted-foreground bg-background ring-2 ring-background" />
40      </div>
41    </div>
42  );
43}