Avatar

Visually represents a user.

Last updated 11/1/2024

Size

Three sizes are available.

Small

Medium

Large

import { Avatar } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <HBox>
      <VBox>
        <Avatar size="small" text="SD" />
        <p>Small</p>
      </VBox>
      <VBox>
        <Avatar size="medium" text="SD" />
        <p>Medium</p>
      </VBox>
      <VBox>
        <Avatar size="large" text="SD" />
        <p>Large</p>
      </VBox>
    </HBox>
  );
}

Variants

You can use any image or text as an avatar. When using an image, set a suitable placeholder as the initial value.

Image

Text

Placeholder(filled)

Placeholder(outlined)

import { Avatar } from "@serendie/ui";
import { VBox, HBox } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <HBox>
      <VBox>
        <Avatar src="https://i.pravatar.cc/300" />
        <p>Image</p>
      </VBox>
      <VBox>
        <Avatar text="SD" />
        <p>Text</p>
      </VBox>
      <VBox>
        <Avatar />
        <p>Placeholder(filled)</p>
      </VBox>
      <VBox>
        <Avatar placeholder="outlined" />
        <p>Placeholder(outlined)</p>
      </VBox>
    </HBox>
  );
}