Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Skeleton

v.1.0.0 | Saturn

Usage

The name of the tokens object to style skeleton is SKELETON_STYLES.

You cannot change the name of the tokens object.

In order to modify the styles of the skeleton component, you need to modify the SKELETON_STYLES object creating or updating the shapes and variants associated.

Shapes and Variants

For each shape, variant can modify the styles of the skeleton component.

The tokens used are:

1234567
const SKELETON_STYLES = {
  [SHAPE_NAME]: {
    [VARIANT_NAME]: {
      skeleton?: CommonStyleType;
    }
  }
}

Example

skeleton theme object example:

12345678910
const SKELETON_STYLES = {
  [SHAPE]: {
    [VARIANT]: {
      skeleton: {
        background_size: 'size',
        border_radius: 'border-radius',
        // Can use a lineagr-gradient-color
        background: 'color',
      }
    }
SkeletonCode API
SkeletonAccessibility