Automattic Design System

Components

Skeleton

A placeholder shown while content is loading.

Size and corner radius are controlled via standard div props such as style and className.

import { Skeleton } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Skeleton
    style={{
        width: 'var(--wpds-dimension-surface-width-xs)',
        height: textLineHeight,
        borderRadius: 'var(--wpds-border-radius-md)',
    }} />;

CirclePermalink to this section

const Circle = () => <Skeleton
    style={{
        width: 'var(--wpds-dimension-size-lg)',
        height: 'var(--wpds-dimension-size-lg)',
        borderRadius: '50%',
    }} />;

Text LinesPermalink to this section

const TextLines = () => <div
    style={ {
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
    } }>
    <Skeleton
        style={ {
            width: '100%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
    <Skeleton
        style={ {
            width: '100%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
    <Skeleton
        style={ {
            width: '60%',
            height: textLineHeight,
            borderRadius: 'var(--wpds-border-radius-md)',
        } } />
</div>;

Card PlaceholderPermalink to this section

const CardPlaceholder = () => <div
    style={ {
        display: 'flex',
        gap: '1rem',
        alignItems: 'center',
        maxWidth: 320,
    } }>
    <Skeleton
        style={ {
            width: 'var(--wpds-dimension-size-lg)',
            height: 'var(--wpds-dimension-size-lg)',
            borderRadius: '50%',
        } } />
    <div
        style={ {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem',
            flex: 1,
        } }>
        <Skeleton
            style={ {
                width: '80%',
                height: textLineHeight,
                borderRadius: 'var(--wpds-border-radius-md)',
            } } />
        <Skeleton
            style={ {
                width: '50%',
                height: textLineHeight,
                borderRadius: 'var(--wpds-border-radius-md)',
            } } />
    </div>
</div>;