Avatar

Avatars represent a user or a team. Stacked avatars represent a group of people.

Usage

First of all, you need to import the Avatar component from the kitchn package.

import { Avatar } from "kitchn"

Default

<Container gap={"small"}>
  <Container row align={"center"} gap={"normal"}>
    <Avatar size={"90"} src={"https://picsum.photos/200/300"} />
    <Avatar size={60} src={"https://picsum.photos/200/300"} />
    <Avatar size={30} src={"https://picsum.photos/200/300"} />
    <Avatar size={20} src={"https://picsum.photos/200/300"} />
  </Container>
  <Container row align="center" gap={"normal"}>
    <Avatar size={90} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={60} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={30} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={20} src={"https://picsum.photos/200/300"} shape={"square"} />
  </Container>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Container row align={"center"} gap={"normal"}>
    <Avatar size={"90"} src={"https://picsum.photos/200/300"} />
    <Avatar size={60} src={"https://picsum.photos/200/300"} />
    <Avatar size={30} src={"https://picsum.photos/200/300"} />
    <Avatar size={20} src={"https://picsum.photos/200/300"} />
  </Container>
  <Container row align="center" gap={"normal"}>
    <Avatar size={90} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={60} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={30} src={"https://picsum.photos/200/300"} shape={"square"} />
    <Avatar size={20} src={"https://picsum.photos/200/300"} shape={"square"} />
  </Container>
</Container>

Text

<Container gap={"small"}>
  <Container gap={"small"} row>
    <Avatar text={"A"} />
    <Avatar text={"Joe"} />
    <Avatar text={"Jérémy Baudrin"} />
  </Container>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Container gap={"small"} row>
    <Avatar text={"A"} />
    <Avatar text={"Joe"} />
    <Avatar text={"Jérémy Baudrin"} />
  </Container>
</Container>

Group

<Container gap={"small"}>
  <Container>
    <AvatarGroup
      members={[
        { src: "https://picsum.photos/200/300" },
        { src: "https://picsum.photos/200/300" },
        { text: "Younès Bessa" },
        { src: "https://picsum.photos/200/300" },
      ]}
    />
  </Container>
  <Container>
    <AvatarGroup
      members={[
        { src: "https://picsum.photos/200/300" },
        { src: "https://picsum.photos/200/300" },
        { text: "Younès Bessa" },
        { src: "https://picsum.photos/200/300" },
      ]}
      limit={3}
    />
  </Container>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Container>
    <AvatarGroup
      members={[
        { src: "https://picsum.photos/200/300" },
        { src: "https://picsum.photos/200/300" },
        { text: "Younès Bessa" },
        { src: "https://picsum.photos/200/300" },
      ]}
    />
  </Container>
  <Container>
    <AvatarGroup
      members={[
        { src: "https://picsum.photos/200/300" },
        { src: "https://picsum.photos/200/300" },
        { text: "Younès Bessa" },
        { src: "https://picsum.photos/200/300" },
      ]}
      limit={3}
    />
  </Container>
</Container>

Props

Name	Type	Default	Required	Description	Accepted values
`size`	`number` \| `string`	`30`	-	The size of the avatar.	-
`username`	`string`	`undefined`	-	The username of the user.	-
`src`	`string`	`undefined`	-	The URL or path of the avatar.	-
`text`	`string`	`undefined`	-	The text of the avatar (if it's a placeholder)	-
`shape`	`string`	`undefined`	-	The shape of the avatar.	`'square'` \| `'round'`

Components Badge