Version: 0.133.0

Skeleton

Skeleton is a versatile primitive component, with no defined style, that can be used to leverage UIs that don't contain actual content yet. Instead, it shows the loading elements of a page in a shape similar to the actual content. Other use cases include:

It shows users that content is loading, offering a vague preview of how content will look once it fully loads.
It is also used internally by AdminUI to handle the loading state of specific components.

Import

import { Skeleton } from '@vtex/admin-ui'

Behavior

By default, the Skeleton is fluid, which means that both width and height are 100% of its container.

Variations

Rectangle

By default, Skeleton's shape is rectangular. To use this variation, the shape property has the rect value.

Circle

The shape can also be circular. To use this variation, the shape property has the circle value.

Props

Name	Type	Description	Required	Default
csx	`StyleObject`	Custom styles	🚫	`{}`
shape	`rect, or circle`	Skeleton's shape	🚫	`circle`
element	`ElementType`	Element to render	🚫	`'div'`

Import​

Behavior​

Variations​

Rectangle​

Circle​

Props​