Skeleton

Atom

Placeholders for loading content.

src/atoms/skeleton

View in Overlays & feedback

Playground

Every control sets a real prop of SkeletonProps. The JSX below updates as you go.

Web

iOS

Android

Props

Shape

pick one

text

avatar

button

card

list

table

Size

pick one

default

small

large

Length

pick one

default

long

short

animate

boolean

JSX · SkeletonProps

<Skeleton text animate />

Variants

5 examples from src/atoms/skeleton/skeleton.md, each rendered live from its own JSX.

Avatar

<Skeleton avatar />

Button

<Skeleton button />

Card

<Skeleton card />

List

<Skeleton list />

Table

<Skeleton table />

Sizes

small

default

large

Anatomy

1

Placeholder block

Dimmed parts appear only in some states or variants.

Props

14 props on SkeletonProps, grouped as they are declared in source. Required props are marked *.

Prop

Type

Default

Description

Shape

pick one

6 props

text

boolean

false

avatar

boolean

false

button

boolean

false

card

boolean

false

list

boolean

false

table

boolean

false

Size

pick one

2 props

small

boolean

false

large

boolean

false

Line length

pick one

6 props

long

boolean

false

A line that runs most of the way across (80%), a mid-paragraph line.

short

boolean

false

A short trailing line (60%), the last line of a paragraph.

animate

boolean

false

Subtle opacity pulse while content loads.

accessibilityLabel

string

–

Screen-reader label announced for the loading placeholder. Defaults to "Loading". The placeholder carries a progressbar role + busy state so assistive tech announces the pending content (matching Spinner / Progress).

testID

string

–

E2E hook forwarded to the root element.

style

LayoutStyle

–

Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard

Not focusable. It has no interaction of its own and takes the semantics of what it wraps.

Semantics

Roles

progressbar

States

busy

ARIA on web

aria-busy

aria-hidden

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.

Web

control 10 · field 10 · card 16 · Instrument Sans

iOS

capsule controls · field 8 · card 12 · SF Pro · 44 pt