components
Skeleton
v.1.0.0 | Saturn
StorybookDisplay a placeholder preview of your content before the data gets loaded to reduce user frustration around load times.
import { Skeleton } from '@kubit-ui-web/react-components'
123456
<Skeleton
variant='DEFAULT'
shapeVariant='SQUARE'
width='100px'
height='25px'
/>Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set these predefined styles for its quick use, access them through the variant prop:
12
<Skeleton variant="DEFAULT" shapeVariant="SQUARE" width="100px" height="25px" /> <Skeleton variant="ALTERNATIVE" shapeVariant="SQUARE" width="100px" height="25px" />
Shape
The form and size of the component is modified by these required props:
- width: set the shape width.
- height: set the shape height.
- shapeVariant: we have set two predefined variants for the theme:
Shape
The form and size of the component is modified by these required props:
- shapeVariant: kubit has the CIRCLE and SQUARE predefined shape variants, but new ones can be added through the theme.
- width: set the shape width.
- height: set the shape height.
12
<Skeleton variant="DEFAULT" shapeVariant="CIRCLE" width="30px" height="30px" /> <Skeleton variant="DEFAULT" shapeVariant="SQUARE" width="100px" height="30px" />