# Skeleton

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Skeleton>Loading</Skeleton>
```

## API Reference

This component is based on the `span` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop        | Type                 | Default |
| ----------- | -------------------- | ------- |
| `loading`   | `boolean`            | `true`  |
| `width`     | `Responsive<string>` | —       |
| `minWidth`  | `Responsive<string>` | —       |
| `maxWidth`  | `Responsive<string>` | —       |
| `height`    | `Responsive<string>` | —       |
| `minHeight` | `Responsive<string>` | —       |
| `maxHeight` | `Responsive<string>` | —       |

## Examples

### Size

Use the width and height props to manually control the size of the skeleton.

```jsx
<Skeleton width="48px" height="48px" />
```

### With children

Use the `loading` prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

```jsx
<Flex gap="4">

	<Skeleton loading={true}>

		<Switch defaultChecked />

	</Skeleton>



	<Skeleton loading={false}>

		<Switch defaultChecked />

	</Skeleton>

</Flex>
```

### With text

When using Skeleton with text, you’d usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

```jsx
<Container size="1">

	<Flex direction="column" gap="2">

		<Text>

			<Skeleton>Lorem ipsum dolor sit amet.</Skeleton>

		</Text>



		<Skeleton>

			<Text>Lorem ipsum dolor sit amet</Text>

		</Skeleton>

	</Flex>

</Container>
```

The difference is especially noticeable when wrapping longer paragraphs:

```jsx
<Container size="1">

	<Flex direction="column" gap="3">

		<Text>

			<Skeleton>

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque

				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna

				erat, fringilla sed commodo sed, aliquet nec magna.

			</Skeleton>

		</Text>



		<Skeleton>

			<Text>

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque

				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna

				erat, fringilla sed commodo sed, aliquet nec magna.

			</Text>

		</Skeleton>

	</Flex>

</Container>
```