SkeletonShape

Importing

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

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

Text Field Skeleton

Icon Skeleton

Custom Skeleton

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

Disabling animation

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

Accessibility

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