Foundations
Icons
Actions
Buttons
Form Controls
Input
Text Area
Select Dropdown
Filter Dropdown
Checkbox
Radio Button
Switch
File Uploader
Color Picker
Multi Select
Search Input
Slider
OTP Input
Date Picker
Time Picker
Date Range Picker
Data Display
Table
Pagination
Progress Bar
Stat Card
Circular Progress
Navigation
Side Menu
Menu Bar
Tabs
Breadcrumb
Ellipsis
Content & Layout
Card
Divider
Banner
Carousel
Accordion
Timeline
Stepper
List
Overlays
Modal
Drawer
Popover
Command Palette
Dropdown Menu
Context Menu
Indicators
Tags
Chips
Badge
Avatar
Avatar Group
Tooltip
Skeleton
Spinner
Feedback
Snackbar
Alert
Callout
State
Avatar Group
IAvatarGroupItem[]People as { name, email, image? }. Without an image, initials are shown.
—numberAvatars shown before the rest collapse into a +N bubble.
4AVATAR_SIZEAvatar size.
AVATAR_SIZE.SMTOOLTIP_POSITIONSide the +N bubble's list of hidden names opens on.
TOOLTIP_POSITION.TOPstringExtra classes on the wrapper.
""import { AvatarGroup } from "gwan-design-system";
const items = [
{
name: "John Doe",
email: "john@gwan.dev",
image: "/images/profile_picture.png",
},
{ name: "Jane Smith", email: "jane@gwan.dev" },
{
name: "Kasun Perera",
email: "kasun@gwan.dev",
image: "/images/founder.png",
},
{ name: "Amara Silva", email: "amara@gwan.dev" },
{ name: "Liam Chen", email: "liam@gwan.dev" },
{ name: "Noah Wright", email: "noah@gwan.dev" },
{ name: "Mia Garcia", email: "mia@gwan.dev" },
];
<AvatarGroup items={items} />