Skeleton

Placeholder loading untuk mempertahankan struktur layout sambil menunggu data.

import { Skeleton } from "@naraya/ui";

Overview

Skeleton membantu mengurangi layout shift saat data belum siap. Gunakan bentuk yang meniru konten final.

Examples

Default text

<Skeleton />

Variants

<Skeleton variant="text" width={140} />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width={120} height={64} />

Card placeholder

<Card>
  <Skeleton variant="circle" width={40} height={40} />
  <Skeleton width="60%" />
  <Skeleton variant="rect" width="100%" height={72} />
</Card>

Props

Prop	Type	Default	Description
variant	`"text" \| "circle" \| "rect"`	`"text"`	Bentuk skeleton.
width	`string \| number`	—	Lebar skeleton (px jika number).
height	`string \| number`	—	Tinggi skeleton (px jika number).
...rest	`HTMLAttributes<HTMLDivElement>`	—	Props native div.

Tokens Used

--bg-surface

Base skeleton color

--color-secondary

Shimmer highlight

--radius-sm/md

Border radius text/rect/circle

Skeleton

Overview

Examples

Props

Tokens Used

Accessibility

Related