grommet
docs
components

Skeleton

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

Storybook
Github

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: "..." }