Skeleton

rows

height

width

animation

import * as React from "react";
import { Skeleton } from "baseui/skeleton";

export default () => {
  return <Skeleton height="100px" width="200px" />;
}

import * as React from "react";
import { Skeleton } from "baseui/skeleton";
export default () => {
  return <Skeleton height="100px" width="200px" />;
}

API

The Skeleton component is optimized for rendering shapes with or without animation while waiting for loading corresponding components.

Examples

Basic usage

Set height and width to generate a single rectangular Skeleton.

Other Shapes

You can change the shape and position of Skeleton through overrides.Root.

Animation

Sub elements

Set rows to a positive number and Skeleton will generate multiple sub elements with the same shape inside the Root. The background color of Root will become transparent automatically when the rows equals to a positive number. You can customize the sub elements' shape and position through overrides.Row.

API

Skeleton props

Name	Type	Description
animation	boolean	Lets you choose whether the skeleton has an animation
height	string	Defines the height of the skeleton root
overrides	custom	Lets you customize all aspects of the component.
rows	number	Defines the number of sub elements in the skeleton root
width	string	Defines the width of the skeleton root

Skeleton exports

You can import this module like so:

import {Skeleton} from 'baseui/skeleton'

It exports the following components or utility functions:

Skeleton