Skeleton

a simple building block skeleton component to represent content that is still loading

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

colors

The background colors to use for the Skeleton. The background for the Skeleton will be one of these colors, based on the depth of the Skeleton within other skeletonized parents. It will use the 'dark' set of colors when in a 'dark' theme and the 'light' set of colors when within a light theme.

object

colors={{
  dark: ['background', 'background-front'],
  light: ['background', 'background-back']
}}

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

height

A fixed height.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"any CSS size"

object

{ min: "...", max: "..." }

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

pad

The amount of padding around the Skeleton contents.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

round

How much to round the corners.

boolean

true

false

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"full"

"any CSS size"

object

{ size: "...", corner: "..." }

where corner could be:

"top"

"left"

"bottom"

"right"

"top-left"

"top-right"

"bottom-left"

"bottom-right"

width

A fixed width.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"any CSS size"

object

{ min: "...", max: "..." }

Theme

skeleton.extend

Any additional style for the Skeleton.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}