Skeleton

import { Skeleton } from "@styple/design-system";

<Flex
  css={{
    gap: "$md",
    flexDirection: "column",
  }}
>
  <Flex
    css={{
      gap: "$md",
    }}
  >
    <Skeleton variant="avatarSm" />
    <Skeleton variant="avatarMd" />
    <Skeleton variant="avatarLg" />
    <Skeleton variant="avatarXl" />
  </Flex>
  <Skeleton
    variant="title"
    css={{
      width: "100%",
    }}
  />
  <Skeleton
    variant="heading"
    css={{
      width: "100%",
    }}
  />
  <Skeleton
    css={{
      width: "100%",
    }}
  />
  <Skeleton variant="buttonSm" />
  <Skeleton variant="buttonMd" />
  <Skeleton variant="buttonLg" />
  <Skeleton variant="badgeSm" />
  <Skeleton variant="badgeLg" />

  // Override with css prop for a variable size element 
  <Skeleton css={{
    width: "320px",
    height: "192px",
    borderRadius: "$xl"
  }} />
</Flex>