Skeleton

A decorative loading placeholder for text, media, and table content.

Default

Text skeletons render one or more placeholder lines.

tsx

<Skeleton lines={3} />

tsx

import { Skeleton } from "madagent";

Choose text, rectangular, or circular geometry.

tsx

<Skeleton variant="text" lines={3} />
<Skeleton variant="rect" height="8rem" />
<Skeleton variant="circle" width="3rem" height="3rem" />

Skeleton is decorative. Put loading semantics on the surrounding region.

tsx

<div aria-busy="true" aria-label="Loading invoices">
  <Skeleton lines={4} />
</div>

Prop	Type	Default	Description
`variant`	`"text""rect""circle"`	`"text"`	Placeholder geometry
`width`	`string`	-	Logical inline size as a CSS length
`height`	`string`	-	Logical block size as a CSS length
`lines`	`number`	`1`	Number of stacked lines for text skeletons

Components automatically adapt to right-to-left languages using CSS logical properties.

tsx

<div aria-busy="true" aria-label="جار تحميل الفواتير">
  <Skeleton lines={4} />
</div>

A decorative loading placeholder for text, media, and table content.

Text skeletons render one or more placeholder lines.

tsx

<Skeleton lines={3} />

tsx

import { Skeleton } from "madagent";

Choose text, rectangular, or circular geometry.

tsx

<Skeleton variant="text" lines={3} />
<Skeleton variant="rect" height="8rem" />
<Skeleton variant="circle" width="3rem" height="3rem" />

Skeleton is decorative. Put loading semantics on the surrounding region.

tsx

<div aria-busy="true" aria-label="Loading invoices">
  <Skeleton lines={4} />
</div>

Prop	Type	Default	Description
`variant`	`"text""rect""circle"`	`"text"`	Placeholder geometry
`width`	`string`	-	Logical inline size as a CSS length
`height`	`string`	-	Logical block size as a CSS length
`lines`	`number`	`1`	Number of stacked lines for text skeletons

Components automatically adapt to right-to-left languages using CSS logical properties.

tsx

<div aria-busy="true" aria-label="جار تحميل الفواتير">
  <Skeleton lines={4} />
</div>