Documentation
Components
Avatar

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

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

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

Group

+1

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

NameTypeDefaultRequiredDescriptionAccepted values
sizenumber | string30-The size of the avatar.-
usernamestringundefined-The username of the user.-
srcstringundefined-The URL or path of the avatar.-
textstringundefined-The text of the avatar (if it's a placeholder)-
shapestringundefined-The shape of the avatar.'square' | 'round'
Last updated on
ComponentsBadge