Avatar

xs

xsサイズのアバターです。限られたスペースや、コンポーネント内に配置する際に使用します。

sm

smサイズのアバターです。

md

mdサイズのアバターです。デフォルトのサイズです。

lg

lgサイズのアバターです。

xl

xlサイズのアバターです。

2xl

2xlサイズのアバターです。

3xl

3xlサイズのアバターです。ページ内で、メインレベルのコンテンツに使用します。

image

ユーザーやエンティティの画像を表示します。画像は自動的にコンテナにフィットするようにリサイズされます。

initial

ユーザーやエンティティのイニシャルを表示します。背景色はカスタマイズ可能です。

pictogram

デフォルトのユーザーアイコンを表示します。画像やイニシャルが利用できない場合のフォールバックとして使用します。

false

バッジを表示しない、デフォルトの状態です。

true

バッジを表示します。未読メッセージなど、Avatarが示す内容に対して通知がある場合などに使用します。

画像は常にコンテナ内でアスペクト比を維持します。画像は中央に配置され、必要に応じてクロップされます。

画像の読み込みに失敗した場合、pictogramにフォールバックします。

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 24px
• Container Width: 24px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 32px
• Container Width: 32px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 40px
• Container Width: 40px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 48px
• Container Width: 48px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 64px
• Container Width: 64px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 96px
• Container Width: 96px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 128px
• Container Width: 128px

適切なサイズを選択し、コンテキストに合わせて使用してください。

バッジをステータス表現として使用しないでください。バッジの使用方法については、Badge を参照してください。