Components
Avatar
An avatar with initials, and a stack with a remainder.
An avatar: a photo, or initials on an accent background when there is none. Plus an overlapping stack for a list of members.
Example
МТАСДК
МТАСДК+2import { Avatar, AvatarStack, initials } from "@toimetdev/pathlogs-core";
<Avatar person={user} size="md" />
<AvatarStack people={task.assignees} max={3} />
initials("Murat Toimet"); // "MT"The stack
Shows the first max avatars and folds the rest into a «+N». A ring in the background colour separates neighbouring avatars from one another.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
person* | { id: string; name: string; image?: string | null } | — | Who to show. Without an image, initials are drawn. |
size | "xs" | "sm" | "md" | "sm" | Size: 20 / 24 / 32 px. |
tip | boolean | true | Show the name as a tooltip on hover. |
person*{ id: string; name: string; image?: string | null }Who to show. Without an image, initials are drawn.
size"xs" | "sm" | "md"defaults to: "sm"
Size: 20 / 24 / 32 px.
tipbooleandefaults to: true
Show the name as a tooltip on hover.
AvatarStack takes people, max (3 by default) and size.