Skeleton

Skeleton is used to display a loading state in components.

Import

import { Skeleton } from '@contentful/f36-components';
// or
import { Skeleton } from '@contentful/f36-skeleton';

How to use Skeleton

  • Compound components of Skeleton are: Container, BodyText, DisplayText, Image, Row.
  • Use the Skeleton.Container to control color, background color, animation, opacity of the skeleton elements that are used inside.
  • Use the Skeleton.BodyText component to simulate bodies of text with multiple lines.
  • Use the Skeleton.DisplayText component to simulate headings, subheadings or titles.
  • Use the Skeleton.Image component to simulate images, illustrations, avatars or icons.
  • Use the Skeleton.Row component to simulate table rows. Only use this component as a child of the TableBody component. The Skeleton.Row component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag.
    • Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5).
    • Pass a value to the rowCount prop equal to the number of rows you need.
    • We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.

Examples

Basic usage

Different speed and color

Composition with different skeleton components

Setting image width and height

Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height

Round image skeleton

Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry

Table rows

Usage without compound components

Props (API reference)

Open in Storybook

Skeleton.Container

Name

Type

Default

children
required
ReactNode

animateId
string

ariaLabel
string

Label attribute

Loading component...
backgroundColor
string

Background color of the skeleton

#e5ebed
backgroundOpacity
number

Background opacity of the skeleton

1
className
string

CSS class to be appended to the root element

clipId
string

foregroundColor
string

Color of the foreground skeleton items

#f7f9fa
foregroundOpacity
number

Opacity of the foreground skeleton items

1
gradientId
string

height
string
number

100%
isAnimated
false
true

Whether skeleton has animation or not

true
preserveAspectRatio
string

speed
string
number

Speed of the animation

2
svgHeight
string
number

Height of the SVG element

100%
svgWidth
string
number

Width of the SVG element

100%
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-skeleton-form
width
string
number

100%

Skeleton.BodyText

Name

Type

Default

lineHeight
string
number

A height of a one line (in pixels)

16
marginBottom
string
number

Spacing between lines (in pixels)

8
numberOfLines
number

A number of skeleton likes

2
offsetLeft
string
number

A distance between left of the container and the beginning of lines (in pixels)

0
offsetTop
string
number

A distance between top of the container and the first line (in pixels)

0
width
string
number

A width of a line

Skeleton.DisplayText

Name

Type

Default

lineHeight
string
number

A height of a one line (in pixels)

21
marginBottom
string
number

Spacing between lines (in pixels)

20
numberOfLines
number

A number of skeleton likes

1
offsetLeft
string
number

A distance between left of the container and the beginning of lines (in pixels)

0
offsetTop
string
number

A distance between top of the container and the first line (in pixels)

0
width
string
number

A width of a line

100

Skeleton.Image

Name

Type

Default

height
string
number

70
offsetLeft
string
number

offsetTop
string
number

radiusX
string
number

0
radiusY
string
number

0
testId
string

cf-ui-skeleton-image
width
string
number

70

Skeleton.Row

Name

Type

Default

columnCount
number

Defines the number of columns to be rendered

5
rowCount
number

Defines the number of rows to be rendered

1