Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Skeleton Loader

Version 6.1.1GithubStorybookPeer review pending

A Skeleton Loader is a visual placeholder that gives users a hint of what type of information will be loaded on a page.

Installation

Installation page anchor
yarn add @twilio-paste/skeleton-loader - or - yarn add @twilio-paste/core
import {SkeletonLoader} from '@twilio-paste/core/skeleton-loader';
import {Text} from '@twilio-paste/core/text';

const SkeletonLoaderExample = () => {
  const [loaded] = React.useState(false);

  return <>{loaded ? <Text as="span">Single line of text</Text> : <SkeletonLoader width="100px" />}</>;
};

SkeletonLoader

SkeletonLoader page anchor

borderRadius

Type
any
Default
borderRadius20

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
any
Default
SKELETON_LOADER

height

Type
any
Default
sizeIcon20