Neumorphism UI

Avatar

プロフィール、メンバー一覧、共有ワークスペースで人物やチームを識別する場合に使います。

プレビュー

サイズとチームのグループ

3 サイズのイニシャルと状態バッジを比較し、チームと追加の人数をグループで表示します。

SMAMUI
チーム
ANDESO
+9

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/avatar

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

画像を取得できない場合に備え、AvatarImage と AvatarFallback を併用します。状態は AvatarBadge、複数人は AvatarGroup と AvatarGroupCount で表します。

import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export default function Example() {
  return (
    <Avatar>
      <AvatarFallback role="img" aria-label="Alex Kim">AK</AvatarFallback>
    </Avatar>
  );
}

API リファレンス

Base UI Avatar を基盤に、画像の読み込み状態と fallback への切り替えを管理します。3つの size、ステータス badge、重なり合う group、残り人数の count を提供します。

コンポーネントプロパティ型デフォルト説明
Avatarsize"sm" | "default" | "lg""default"Avatar と badge の size をまとめて変更します。
AvatarImagesrcstring—表示する画像の URL です。
AvatarImagealt必須string—画像が表す人物または対象を識別する代替テキストです。
AvatarFallbackdelaynumber0fallback を表示するまでの遅延時間です。
AvatarBadgechildrenReact.ReactNode—ステータスの dot または小さなステータスアイコンを表示します。

アクセシビリティ

  • 01

    人物を識別する画像の alt にはその人の名前を使用します。同じ名前が隣に表示される場合は空の alt でも構いません。

  • 02

    AvatarBadge がオンライン状態などの意味を伝える場合は、aria-label または視覚的に非表示のテキストを提供してください。

  • 03

    AvatarGroupCount の +8 のような count には、その意味を説明する aria-label を追加してください。