Skeleton

Skeleton indicates that the things are really happening. It is used to create a perception of reduced waiting time. Skeleton is good to when:

• The component contains good amount of information, such as List or Card
• There’s more than 1 element loading at the same time that requires an indicator
• Not to use for a long-running process, e.g. importing data etc

<Skeleton
  height={50}
  id='skeleton'
  mode='light'
  radius='none'
  shape='square'
  style={{}}
  width={350}
/>

Usage

import { Skeleton } from 'bio-bind-ui';

<Skeleton
  height={50}
  id='skeleton'
  mode='light'
  radius='none'
  shape='square'
  style={{}}
  width={350}
/>

Examples

Radius (Optional)

Use radius for change the corner radius size of skeleton component: none, xs, sm, md, lg, xl

<Skeleton
  height={50}
  id='skeleton'
  mode='light'
  radius='xl'
  shape='square'
  style={{}}
  width={350}
/>

Mode (Optional)

Use mode for change color mode of skeleton component: light or dark

<Skeleton
  height={50}
  id='skeleton'
  mode='dark'
  radius='none'
  shape='square'
  style={{}}
  width={350}
/>

Props