Components

Component

Avatar

Profile image, fallback, badge, and stacked identity display.

ReactReact Native6 props
PreviewReact
BC

Hozorica

Online identity with status badge

BCDSRN

Imports

import { Avatar } from "@hozorica/hods-react";
import { Avatar } from "@hozorica/hods-react-native";

Props

PropTypeDescription
srcstringProfile image URL.
altstringAccessible image description on web and native.
fallbackReactNodeRendered when src is not provided.
size20 | 24 | 36 | 42 | 48 | 56 | 64 | 80 | 96 | 108Avatar diameter. Defaults to 48.
badgeMasknone | circle | flower | shieldVisual clipping style for the avatar surface.
onLoadingStatusChange(status) => voidCalled when image load or error fires.

Platform Support

React

Renders an image or fallback inside a circular token surface with AvatarBadge and AvatarStack helpers.

React Native

Uses Image/View primitives with the same size, fallback, badge, and stack concepts.

Usage

<Avatar size="64" src="/avatar.png" fallback="BC"><AvatarBadge><Badge tone="positive">ON</Badge></AvatarBadge></Avatar>

Notes

  • Use AvatarBadge as a child for status marks.
  • Use AvatarStack for overlapping groups of avatars.
  • Fallback is shown when src is absent; image error fallback is intentionally not stateful in the RSC-safe web entry.