Skeleton

A component that uses the isLoading prop to display a Skeleton placeholder until children are ready to be displayed. When used without size props, it fills the outer dimensions of its children, else it can be sized explicitly to suit different use cases.

Examples

Dynamic Size

View standalone

If no size props are provided, the inline and block sizes of Skeleton will be inferred from the dimensions of its children.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

1. Multiple elements inside one Skeleton.

2. Multiple elements inside one Skeleton.

3. Multiple elements inside one Skeleton.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea.

Code

<Stack gap="16px">
  <Skeleton>
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </Text>
  </Skeleton>
  <Skeleton>
    <Text>
      1. Multiple elements inside one Skeleton.
    </Text>
    <Text>
      2. Multiple elements inside one Skeleton.
    </Text>
    <Text>
      3. Multiple elements inside one Skeleton.
    </Text>
  </Skeleton>
  <Skeleton>
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea.
    </Text>
  </Skeleton>
  <Skeleton>
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea.
    </Text>
  </Skeleton>
</Stack>

Fixed Size

View standalone

The size props can be used to size Skeleton as desired, which also restricts the dimensions of its children.

I am some text inside a 100 x 100 Skeleton

Code

<Skeleton
  size={{
    height: '100px',
    width: '100px'
  }}
>
  <Text>
    I am some text inside a 100 x 100 Skeleton
  </Text>
</Skeleton>

Template Example

View standalone

Skeleton components can be assembled individually to create bespoke templates, allowing to keep you actual content and your Skeleton separate if required.`

Code

<Grid gap="16px">
  <Column span={2}>
    <Skeleton
      isLoading
      size={{
        height: '100%',
        minHeight: '100%',
        width: '100%'
      }}
    >
      <Box />
    </Skeleton>
  </Column>
  <Column span={10}>
    <Stack gap="16px">
      <Skeleton
        isLoading
        size={{
          height: '36px',
          minHeight: '36px',
          width: '50%'
        }}
      >
        <Box />
      </Skeleton>
      <Skeleton
        isLoading
        size={{
          height: '18px',
          minHeight: '18px',
          width: '85%'
        }}
      >
        <Box />
      </Skeleton>
      <Skeleton
        isLoading
        size={{
          height: '18px',
          minHeight: '18px',
          width: '50%'
        }}
      >
        <Box />
      </Skeleton>
      <Skeleton
        isLoading
        size={{
          height: '18px',
          minHeight: '18px',
          width: '75%'
        }}
      >
        <Box />
      </Skeleton>
      <Skeleton
        isLoading
        size={{
          height: '18px',
          minHeight: '18px',
          width: '33%'
        }}
      >
        <Box />
      </Skeleton>
    </Stack>
  </Column>
</Grid>

Props

`size`

{ width: string; height: string; minHeight?: string; }

`isLoading`

boolean

`className`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.