Skeleton

This component displays a placeholder preview of components while data isn’t available. Its form will depend on said data.

Basic Usage


import { Skeleton } from '@krakentech/coral';
 
<Skeleton />

Properties

animation


<Skeleton animation="wave" width={100} height={100} variant="rectangular" />

width / height


<Skeleton height={250} width={250} variant="rectangular" />

variant


<Skeleton height={250} width={120} variant="rounded" />

Full Example

An pre-built example of a page that utilises Skeleton

When using the text variant it is important to place the Skeleton inside of a Typography parent, to ensure that the size is inferred correctly. Note, that while you can set the width manually, any manual height values will be ignored for the text variant, since the height is set to 1em. If the paragraph is expected to have multiple lines, you can place multiple Skeletons inside of a Typography.


<Stack flexDirection="column" gap="md">
    <Typography variant="h1">
        <Skeleton width={300} />
    </Typography>
    <Stack flexDirection="row" gap="lg" justifyContent="space-between">
        <Skeleton width={100} height={100} variant="circular" />
        <Skeleton height={100} variant="rounded" />
    </Stack>
    <Typography variant="body1">
        <Skeleton />
        <Skeleton />
        <Skeleton width={200} />
    </Typography>
    <Typography variant="body1">
        <Skeleton />
    </Typography>
    <Stack flexDirection="column" gap="md" flexWrap="wrap">
        <Skeleton height={50} width={200} variant="rectangular" />
    </Stack>
</Stack>

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`animation`	`ResponsiveVariant<ConditionalValue<"pulse" \| "wave"> \| undefined>` The type of animation. Set as undefined disable.	`pulse`
`variant`	`ResponsiveVariant<ConditionalValue<"text" \| "rounded" \| "circular" \| "rectangular"> \| undefined>` The variant of the skeleton to use.	`text`
`height`	`ResponsiveVariant<string \| number>` Height of the skeleton.
`width`	`ResponsiveVariant<string \| number>` Width of the skeleton.
`aria-label`	`string \| undefined` A hidden screen-reader label to describe to the user what the skeleton is for.
`children`	`ReactNode`

Design

Good to know

In an ideal world a user would never see this component but its existence is purely for the worst case scenario where the content won’t load quick enough, the purpose of a skeleton is to reduce use frustration during load time. The logic being, seeing something is better than seeing a blank screen.

Component breakdown

Corner radius: 4px
Colour: Purple Haze