Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

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 }

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.