Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

SkeletonShape

Github

Storybook

A placeholder component that mimics the shape of various UI elements while data is loading.

Importing

The component can be imported via:

import { SkeletonShape } from '@customerio/pluma-components/react';

<SkeletonShape>
    <Button size="small">Button</Button>
</SkeletonShape>

Preset Skeletons

The SkeletonShape component can be used to mimic the shapes of common UI elements like buttons, text fields, icons, and more.

Button Skeleton

<SkeletonShape>
    <Button size="medium">Button</Button>
</SkeletonShape>

Text Field Skeleton

<SkeletonShape>
    <TextField ariaLabel="Loading Text Field" />
</SkeletonShape>

Icon Skeleton

<SkeletonShape>
    <Icon name="loading-icon" />
</SkeletonShape>

Custom Skeleton

For custom shapes, use the style prop to define dimensions and other CSS properties.

<SkeletonShape style={{ width: '100px', height: '100px', borderRadius: '50%' }} />

Disabling animation

To disable the animation, set the shouldAnimate prop to false.

<SkeletonShape shouldAnimate={false}>
    <Button size="small">Button</Button>
</SkeletonShape>

Accessibility

Ensure SkeletonShape is hidden from assistive technologies using appropriate ARIA attributes or by marking it as purely decorative in the DOM.

API

`PlumaSkeletonShape` `extends Box`

`shouldAnimate` `boolean | undefined`

Whether the skeleton shape should animate

SkeletonShape

PlumaSkeletonShape extends Box

shouldAnimate boolean | undefined

On this page

`PlumaSkeletonShape` `extends Box`

`shouldAnimate` `boolean | undefined`