Overview
Getting Started
Installation
About
Changelog
Core Concepts
Iconography
Layout
Responsive
Theming
Layout Components
Box
Alpha
Container
Alpha
Grid
Alpha
Flex
Alpha
Components
Avatar
Alpha
Button
Alpha
ButtonIcon
Alpha
ButtonLink
Alpha
Card
Alpha
Checkbox
Alpha
Collapsible
Alpha
Header
Alpha
HeaderPage
Alpha
Icon
Alpha
Link
Alpha
Menu
Alpha
RadioGroup
Alpha
SearchField
Alpha
Select
Alpha
Skeleton
Alpha
Switch
Alpha
Table
Alpha
Tabs
Alpha
TagGroup
Alpha
Text
Alpha
TextField
Alpha
Tooltip
Alpha
Version 0.7.0 - Alpha
Skeleton
component

Skeleton

Use to show a placeholder while content is loading.

Usage

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

<Flex direction="column" gap="4">
  <Skeleton width={400} height={160} />
  <Skeleton width={400} height={12} />
  <Skeleton width={240} height={12} />
</Flex>

API reference

PropTypeDefaultResponsive
width
number
80No
height
number
24No
rounded
boolean
falseNo
className
string
-No
style
CSSProperties
-No

Examples

Demo 1

You can use a mix of different sizes to create a more complex skeleton.

<Flex 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 gap="4">
      <Skeleton width="100%" height={8} />
      <Skeleton width="100%" height={8} />
    </Flex>
  </Flex>
</Flex>

Demo 2

You can use a mix of different sizes to create a more complex skeleton.

<Flex direction="column" gap="4">
  <Skeleton width={400} height={160} />
  <Skeleton width={400} height={12} />
  <Skeleton width={240} height={12} />
</Flex>

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.

Changelog