Skeleton

<View width="300px" maxWidth="100%">
  <Skeleton  />
</View>

Skeleton should be used to render content placeholders until real data is available. When no size props are passed to Skeleton, it mimics the line-height of the default text size.

<Skeleton />

To specify a specific size for the placeholder, use the width and height properties. For instance, you can mimic a button size to give the user a hint about the component layout. Both width and height can be specified using x1 unit multipliers with number values or literal string values like 50%.

<Skeleton height={9} width="120px" />

By default, Skeleton comes with a small radius. You can change it to any radius token, remove it entirely for full-width elements, or set it to circular to mimic the shape of components like Avatar.

<Skeleton height={15} width={15} borderRadius="circular" />

You can combine multiple skeletons to construct component layouts. However, we recommend not implementing a 1:1 representation of the component loading. It's sufficient to provide users with a hint of what to expect.

<Card>
  <View gap={3} direction="row">
    <Skeleton width={20} height={20} borderRadius="medium" />
    <View.Item grow>
      <View gap={3}>
        <Text variant="title-1">
          <Skeleton width="30%" />
        </Text>
        <View gap={2}>
          <Skeleton />
          <Skeleton width="60%" />
        </View>

        <View.Item gapBefore={6}>
          <Skeleton height={9} width={25} />
        </View.Item>
      </View>
    </View.Item>
  </View>
</Card>

Skeleton supports responsive syntax for the width and height properties. Use object syntax to control their values based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<Select size={{ s: 'medium', l: 'large' }}>

• For the reduced-motion preference, Skeleton has its animation disabled.