avatar

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/avatar/Avatar.astro directly.
3/**
4 * @component Avatar
5 * @title Avatar
6 * @description An image representing a user or entity, with fallback support when unavailable.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2531-2620&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 * <div class="flex flex-wrap items-center gap-4">
11 *   <Avatar>
12 *     <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
13 *     <AvatarFallback>TK</AvatarFallback>
14 *     <AvatarBadge />
15 *   </Avatar>
16 *   <AvatarGroup>
17 *     <Avatar>
18 *       <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
19 *       <AvatarFallback>WA</AvatarFallback>
20 *     </Avatar>
21 *     <Avatar>
22 *       <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
23 *       <AvatarFallback>BJ</AvatarFallback>
24 *     </Avatar>
25 *     <AvatarGroupCount>+2</AvatarGroupCount>
26 *   </AvatarGroup>
27 * </div>
28 *
29 * @usage
30 *
31 * ```astro nocollapse
32 * ---
33 * import {
34 *   Avatar,
35 *   AvatarImage,
36 *   AvatarFallback,
37 *   AvatarBadge,
38 *   AvatarGroup,
39 *   AvatarGroupCount,
40 * } from '@bejamas/ui/components/avatar';
41 * ---
42 *
43 * <Avatar size="lg">
44 *   <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
45 *   <AvatarFallback>TK</AvatarFallback>
46 *   <AvatarBadge />
47 * </Avatar>
48 * ```
49 *
50 * @examples
51 *
52 * ### Sizes
53 *
54 * <div class="flex items-center gap-4">
55 *   <Avatar size="sm">
56 *     <AvatarImage src="https://github.com/bejamas.png" alt="small" />
57 *     <AvatarFallback>SM</AvatarFallback>
58 *   </Avatar>
59 *   <Avatar>
60 *     <AvatarImage src="https://github.com/bejamas.png" alt="default" />
61 *     <AvatarFallback>MD</AvatarFallback>
62 *   </Avatar>
63 *   <Avatar size="lg">
64 *     <AvatarImage src="https://github.com/bejamas.png" alt="large" />
65 *     <AvatarFallback>LG</AvatarFallback>
66 *   </Avatar>
67 * </div>
68 *
69 * ### Badge
70 *
71 * <Avatar>
72 *   <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
73 *   <AvatarFallback>TK</AvatarFallback>
74 *   <AvatarBadge />
75 * </Avatar>
76 *
77 * ### Group
78 *
79 * <AvatarGroup>
80 *   <Avatar>
81 *     <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
82 *     <AvatarFallback>WA</AvatarFallback>
83 *   </Avatar>
84 *   <Avatar>
85 *     <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
86 *     <AvatarFallback>BJ</AvatarFallback>
87 *   </Avatar>
88// … truncated