Components

Component

Skeleton

Loading placeholder that previews the shape of content before it appears.

ReactReact Native4 props
PreviewReact

Imports

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

Props

PropTypeDescription
radius0 | 8 | 16 | fullCorner radius preset.
toneneutral | magicPlaceholder visual tone.
width / heightDimensionToken | stringSkeleton dimensions.
asChildbooleanWeb-only child composition.

Platform Support

React

Token-sized animated placeholder with radius, tone, asChild, width, and height props.

React Native

Token-sized placeholder view with matching radius, tone, width, and height props.

Usage

<Skeleton radius="full" width="x12" height="x12" />

Notes

  • Use Skeleton to reserve layout while content loads.
  • Match the shape and approximate size of the final content.
  • Skeleton is aria-hidden by default because it is decorative loading affordance.