Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Skeleton Loader

Peer 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.

Version 6.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/skeleton-loader - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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" />}</>;
};

Props

Props page anchor

SkeletonLoader

SkeletonLoader page anchor

borderBottomLeftRadius

Responsive prop of BorderRadius tokens for the CSS border-bottom-left-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderBottomRightRadius

Responsive prop of BorderRadius tokens for the CSS border-bottom-right-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderRadius

Responsive prop of BorderRadius tokens for the CSS border-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }
Default
borderRadius20

borderTopLeftRadius

Responsive prop of BorderRadius tokens for the CSS border-top-left-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

borderTopRightRadius

Responsive prop of BorderRadius tokens for the CSS border-top-right-radius property

Type
"borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | ("borderRadius0" | "borderRadius10" | "borderRadius20" | "borderRadius30" | "borderRadiusCircle" | "borderRadiusPill" | null)[] | { ...; }

display

Responsive style prop for the CSS display property

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

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

Type
string
Default
SKELETON_LOADER

height

Responsive style prop of Size Tokens for for the CSS height property

Type
| string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions }
Default
sizeIcon20

maxHeight

Responsive style prop of Size Tokens for for the CSS max-height property

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }

maxWidth

Responsive style prop of Size Tokens for for the CSS max-width property

Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }

minHeight

Responsive style prop of Size Tokens for for the CSS min-height property

Type
| string | number | (string & {}) | (MinHeightOptions | null)[] | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }

minWidth

Responsive style prop of Size Tokens for for the CSS min-width property

Type
| string | number | (string & {}) | (MinWidthOptions | null)[] | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

size

Responsive style prop of Size Tokens for for the CSS width and height properties

Type
string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions; } | (WidthOptions | null)[] | { ...; }

width

Responsive style prop of Size Tokens for the CSS width property

Type
| string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions }