Skeleton

A skeleton acts as a placeholder for content, usually while the content loads.

Examples Usage Code Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/skeleton`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/skeleton, (opens new window)
Bundle	unpkg.com, (opens new window)

Skeleton Props

`borderRadius`
Description	Controls the border radius, or rounding of the skeleton's corners.
Default	`"var(--ds-radius-small)"`
Type	`0 \| "0" \| "var(--ds-radius-xsmall)" \| "var(--ds-radius-small)" \| "var(--ds-radius-medium)" \| "var(--ds-radius-large)" \| "var(--ds-radius-xlarge)" \| "var(--ds-radius-xxlarge)" \| "var(--ds-radius-full)" \| "var(--ds-radius-tile)"`

`color`
Description	Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
Type	`string`

`groupName`
Description	Applied as a data-attribute. Use this to target groups of skeletons with the same name (e.g. for applying custom styles) `groupName="my-skeleton" -> <div data-my-skeleton>`
Type	`string`

`height`
Required
Description	Height of the skeleton.
Type	`string \| number`

`interactionName`
Description	An optional `interactionName` used to identify when this component is holding an interaction.
Type	`string`

`isShimmering`
Description	Enables the shimmering animation.
Default	`false`
Type	`boolean`

`ShimmeringEndColor`
Description	Overrides the default shimmering ending color of skeleton.
Type	`string`

`testId`
Description	A test id for automated testing.
Type	`string`

`width`
Required
Description	Width of the skeleton.
Type	`string \| number`

Was this page helpful?

We use this feedback to improve our documentation.