@hanzo/ui
GitHubnpm
AccordionAlert DialogAspect RatioAvatarBadgeButtonCardCheckboxCollapsibleCommandContext MenuDialogDropdown MenuGlassHover CardInputLabelPopoverProgressRadio GroupResizableLayoutScroll AreaSelectBandScreenSliderSpinnerSwitchTabsTextareaToasterToggle GroupTooltipFormProseLinkVideoCarouselSheetSkeletonMedia StackNav ItemsBreadcrumbStep IndicatorInput OtpNavigation MenuDrawer

Avatar

import { Avatar, AvatarImage, AvatarFallback } from '@hanzo/ui'

Default

A picture with initials behind it; the initials show until the picture loads and stay if it never does.

Hanzo
HZ
export function Default() {

  return (

    <Avatar>

      <AvatarImage src="https://github.com/hanzoai.png" alt="Hanzo" />

      <AvatarFallback>HZ</AvatarFallback>

    </Avatar>

  )

}

Fallback

Initials alone when there is no picture or the link is dead; `delayMs` holds them back so a fast image does not flash them first.

MC
Mira Chen
MC
Lux
export function Fallback() {

  return (

    <XStack gap="$3" items="center">

      <Avatar>

        <AvatarFallback>MC</AvatarFallback>

      </Avatar>

      <Avatar>

        <AvatarImage
          src="https://github.com/hanzoai/no-such-avatar.png"
          alt="Mira Chen"
        />

        <AvatarFallback>MC</AvatarFallback>

      </Avatar>

      <Avatar>

        <AvatarImage src="https://github.com/luxfi.png" alt="Lux" />

        <AvatarFallback delayMs={600}>LX</AvatarFallback>

      </Avatar>

    </XStack>

  )

}

Sizes

`size` is a number of pixels or a size token; 32 is the default.

Zoo
ZO
Zoo
ZO
Zoo
ZO
Zoo
ZO
export function Sizes() {

  return (

    <XStack gap="$3" items="center">

      <Avatar size={24}>

        <AvatarImage src="https://github.com/zooai.png" alt="Zoo" />

        <AvatarFallback>ZO</AvatarFallback>

      </Avatar>

      <Avatar>

        <AvatarImage src="https://github.com/zooai.png" alt="Zoo" />

        <AvatarFallback>ZO</AvatarFallback>

      </Avatar>

      <Avatar size={48}>

        <AvatarImage src="https://github.com/zooai.png" alt="Zoo" />

        <AvatarFallback>ZO</AvatarFallback>

      </Avatar>

      <Avatar size="$6">

        <AvatarImage src="https://github.com/zooai.png" alt="Zoo" />

        <AvatarFallback>ZO</AvatarFallback>

      </Avatar>

    </XStack>

  )

}

Square

`circular={false}` with a radius of your own suits a workspace or organization mark; `bordered` draws the theme edge around it.

Lux
LX
LX
export function Square() {

  return (

    <XStack gap="$3" items="center">

      <Avatar circular={false} rounded="$3">

        <AvatarImage src="https://github.com/luxfi.png" alt="Lux" />

        <AvatarFallback>LX</AvatarFallback>

      </Avatar>

      <Avatar circular={false} rounded="$3" bordered>

        <AvatarFallback>LX</AvatarFallback>

      </Avatar>

    </XStack>

  )

}

Group

A team stacked with negative margins; a border in the page color keeps each face separate from the next, and the last one is a count.

Hanzo
HZ
Lux
LX
Zoo
ZO
+4
export function Group() {

  return (

    <XStack items="center">

      <Avatar borderWidth={2} borderColor="$background">

        <AvatarImage src="https://github.com/hanzoai.png" alt="Hanzo" />

        <AvatarFallback>HZ</AvatarFallback>

      </Avatar>

      <Avatar ml={-8} borderWidth={2} borderColor="$background">

        <AvatarImage src="https://github.com/luxfi.png" alt="Lux" />

        <AvatarFallback>LX</AvatarFallback>

      </Avatar>

      <Avatar ml={-8} borderWidth={2} borderColor="$background">

        <AvatarImage src="https://github.com/zooai.png" alt="Zoo" />

        <AvatarFallback>ZO</AvatarFallback>

      </Avatar>

      <Avatar ml={-8} borderWidth={2} borderColor="$background">

        <AvatarFallback>+4</AvatarFallback>

      </Avatar>

    </XStack>

  )

}

Types

export type AvatarProps = ComponentProps<typeof GuiAvatar>
export type AvatarImageProps = ComponentProps<typeof GuiAvatar.Image>
export type AvatarFallbackProps = ComponentProps<typeof GuiAvatar.Fallback>

Exports

AvatarAvatarImageAvatarFallback