Components
Avatar
Displays an image or a fallback within a circular avatar.
BB
BBB
+3
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@tulip-systems/core/components/client";<Avatar>
<AvatarImage src="/images/avatar.jpeg" />
<AvatarFallback>B</AvatarFallback>
</Avatar>Examples
Basic
A basic avatar component with an image and a fallback.
B
Badge
Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
B
Badge with Icon
You can also use an icon inside <AvatarBadge>.
B
Avatar Group
Use the AvatarGroup component to add a group of avatars.
BBB
Avatar Group Count
Use <AvatarGroupCount> to add a count to the group.
BBB
+3
Avatar Group with Icon
You can also use an icon inside <AvatarGroupCount>.
BBB
Sizes
Use the size prop to change the size of the avatar.
BBB
For more information about Radix UI Avatar props, see the Radix UI documentation.