Avatar

Display aspect-fixed images with a fallback while loading

Features

Accepts size prop that stays in sync with other components.

Completely control styles on every element.

Automatically swaps fallback for image on load.

Usage

import { Avatar } from 'tamagui'

export default () => (
  <Avatar circular size="$6">
    <Avatar.Image src="http://placekitten.com/200/300" />
    <Avatar.Fallback bc="red" />
  </Avatar>
)

API Reference

Avatar

Avatar extends Square, giving it all the Tamagui standard props as well as size and circular.

Avatar.Fallback

Avatar.Fallback extends YStack, plus:

Props

delayMs

number

Milliseconds to wait before showing the fallback, to prevent flicker.

Avatar.Image

Avatar.Fallback extends Image.

Edit this page on GitHub.

Forms

Panels

Organize

Content

Visual

Etc

Avatar

Features

Usage

API Reference

Avatar

Avatar.Fallback

Props

delayMs

Avatar.Image