Avatarアバター

ユーザーについて視覚的に表現するコンポーネントです。

更新 2024/11/1

サイズ

3種類のサイズから選択できます。

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>
  );
}

バリエーション

任意の画像やテキストをアバターとして使用できます。特に画像をアバターとする場合は、初期値としてプレースホルダーを適切に設定してください。

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>
  );
}