@atlaskit/skeleton/dist/types/ui/index.d.ts

A skeleton acts as a placeholder for content, usually while the content loads.

import type { BorderRadius } from '@atlaskit/tokens/css-type-schema';
export type SkeletonProps = {
    /**
     * Width of the skeleton.
     */
    width: string | number;
    /**
     * Height of the skeleton.
     */
    height: string | number;
    /**
     * Controls the border radius, or rounding of the skeleton's corners.
     */
    borderRadius?: Exclude<BorderRadius, 'inherit'>;
    /**
     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
     */
    color?: string;
    /**
     * Overrides the default shimmering ending color of skeleton.
     */
    ShimmeringEndColor?: string;
    /**
     * Enables the shimmering animation.
     */
    isShimmering?: boolean;
    /**
     * Applied as a data-attribute. Use this to target groups of skeletons with the same name (e.g. for applying custom styles)
     * ```
     * groupName="my-skeleton" -> <div data-my-skeleton>
     * ```
     */
    groupName?: string;
    /**
     * An optional `interactionName` used to identify when this component is holding an interaction.
     */
    interactionName?: string;
    /**
     * A test id for automated testing.
     */
    testId?: string;
};
/**
 * __Skeleton__
 *
 * A skeleton acts as a placeholder for content, usually while the content loads.
 *
 * - [Examples](https://atlassian.design/components/skeleton/examples)
 * - [Code](https://atlassian.design/components/skeleton/code)
 */
declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, interactionName, testId, }: SkeletonProps) => JSX.Element;
export default Skeleton;