Skeleton

Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Skeleton
      active
      loading
      title
      shape="circle"
      size="default"
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
active	boolean	true	Show animation effect.
avatar	boolean	false	Show avatar placeholder.
loading	boolean	true	Display the skeleton when true.
title	boolean	true	Show title placeholder.
shape	string	"circle"	Shape of the avatar/button skeleton.
size	string	"default"	Size of the skeleton elements.
block	boolean	false	Option to fit button width to its parent width.

Import

import { Skeleton } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.