Skeleton

Use to show a placeholder while content is loading.

Usage#

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

<Skeleton width={200} height={24} />

API reference#

Skeleton extends standard HTML div attributes.

Prop	Type	Default	Description
width	string	80	The width of the skeleton. Accepts a number (pixels) or CSS string value.
height	string	24	The height of the skeleton. Accepts a number (pixels) or CSS string value.
rounded	boolean	false	Whether to apply fully rounded corners (for circular shapes).
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Examples#

Rounded#

<Box surface="3" p="4">
  <Flex direction="column" gap="4">
    <Skeleton rounded width={32} height={32} />
    <Skeleton rounded width={48} height={48} />
    <Skeleton rounded width={64} height={64} />
  </Flex>
</Box>

Avatar with text#

<Box surface="3" p="4">
  <Flex direction="column" gap="4">
    <Skeleton rounded width={48} height={48} />
    <Flex direction="column" gap="4">
      <Skeleton width={200} height={8} />
      <Skeleton width={200} height={8} />
      <Skeleton width={200} height={8} />
    </Flex>
  </Flex>
</Box>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Skeleton

Changelog#

Version 0.9.0#

Breaking Changes

Breaking Changed className prop behavior to augment default styles instead of being ignored or overriding them.

If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496