Avatar

Display aspect-ratio-fixed images with a fallback while loading

Accepts size prop that stays in sync with other components.
Completely control styles on every element.
Automatically swaps fallback for image on load.

Installation

Avatar is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/avatar

Usage

import { Avatar } from '@hanzo/gui'

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

API Reference

Avatar

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

Avatar.Fallback

Avatar.Fallback extends YStack, plus:

Prop	Type	Default	Required
delayMs	number	-	-

Avatar.Image

Avatar.Image extends Image.

Last updated on

Card

Sizable, themeable cards with a flexible API

Image

A pure, lightweight Image component with Hanzo GUI style props

On this page

Avatar.Fallback