Homecomponentsfeedback

Skeleton

A placeholder for the information that is still loading.


Use Skeleton components to display a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.

Skeleton Title

Use SkeletonTitle to display a placeholder for a title.

Skeleton Paragraph

Use SkeletonParagraph to display a placeholder for a paragraph.

Skeleton Avatar

Use SkeletonAvatar to display a placeholder for an avatar.

Skeleton Button

Use SkeletonButton to display a placeholder for a button.

Skeleton Input

Use SkeletonInput to display a placeholder for an input.

Example

Here's an example of a more complex skeleton built upon Skeleton components.

API

SkeletonTitle

level
Required
Level of the title.
1
2
3
4
5
6

width
Required
Width of the title.
PxOrRem

active
Required
Animation effect.
true
false

data
An object with the data keys and values.
DataAttributeMap

SkeletonParagraph

rows
Required
Row count of the paragraph.
number

width
Required
Width of the paragraph.
"100%" | PxOrRem

size
Required
Size of the paragraph.
small
large
xxlarge
xlarge
regular
xsmall
micro

active
Required
Animation effect.
true
false

data
An object with the data keys and values.
DataAttributeMap

SkeletonAvatar

shape
Required
Shape of the avatar.
round
square

active
Required
Animation effect.
true
false

size
Size of the avatar.
small
medium
large
xlarge
xsmall

data
An object with the data keys and values.
DataAttributeMap

SkeletonButton

size
Required
Size of the button.
small
medium
large
undefined

width
Required
Width of the button.
"100%" | PxOrRem

active
Required
Animation effect.
true
false

data
An object with the data keys and values.
DataAttributeMap

SkeletonInput

width
Required
Width of the input.
"100%" | PxOrRem

active
Required
Animation effect.
true
false

size
Size of the input.
small
regular

data
An object with the data keys and values.
DataAttributeMap