Avatar

ユーザーアバター表示コンポーネント。

インポート

import { Avatar, AvatarImage, AvatarFallback } from '@caroainc/ui-components/client'

基本的な使い方

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

フォールバック

画像が読み込めない場合に表示されます。

YTABCD

<Avatar>
  <AvatarFallback>YT</AvatarFallback>
</Avatar>

サイズ変更

SMMDLG

<Avatar className="h-8 w-8">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar className="h-16 w-16">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	追加のCSSクラス（サイズ変更等）

Avatar

インポート

基本的な使い方

フォールバック

サイズ変更

Props

On this page