Skeleton Loader

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/skeleton-loader
`

$3

`shell
yarn add @leafygreen-ui/skeleton-loader
`

$3

`shell
npm install @leafygreen-ui/skeleton-loader
`

Example

`jsx





`

Properties

#### Skeleton

| Name | Type | Default | Description |
| ---------------- | -------- | --------- | ------------------------------------- |
| size | string | default | Determines the height of the skeleton |
| HTML div props | | | Additional HTML div properties |

#### Paragraph Skeleton

| Name | Type | Default | Description |
| ---------------- | --------- | ------- | -------------------------------------------------------- |
| withHeader | boolean | false | Indicates whether the header skeleton should be rendered |
| HTML div props | | | Additional HTML div properties |

#### Table Skeleton

| Name | Type | Default | Description |
| ---------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------- |
| columnLabels | Array | | Column labels. Empty strings will be treated as unknown and render a simple skeleton. |
| numRows | number | 5 | Number of rows |
| numCols | number | 4 | Number of columns |
| baseFontSize | 13 \| 16 | 13 | Base font size |
| HTML div props | | | Additional HTML div properties |

#### Form Skeleton

only extends HTML div props.

#### Card Skeleton

only extends HTML div props.

#### Icon Skeleton

| Name | Type | Default | Description |
| ---------------- | ----------------------------------------------------------- | --------- | ------------------------------------- |
| size | 'small'\| 'default'\| 'large'\| 'xlarge'\| number | default | Determines the height of the skeleton |
| HTML div` props | | | Additional HTML div properties |