Skeleton

This is the <Skeleton /> component

---

Skeleton variants

Presentation

  

  

  

  

  

Source

'@candy/kitkat/skeleton'

//Circular Skeleton <Skeleton appearance="circular" width="100px" height="100px" />//Rectangular Skeleton <Skeleton appearance="rectangular" width="100px" height="100px" />//Text Skeleton <Skeleton appearance="text" />//Thumbnail Skeleton <Skeleton appearance="thumbnail" />//Sort Skeleton <Skeleton appearance="sort" />//Rectangular Skeleton Animation<Skeleton appearance="rectangular" width="100px" height="100px" />

Skeleton Card

Presentation

Source

'@candy/kitkat/skeleton'

//Card Skeleton <SkeletonCard />//Card Skeleton animation<SkeletonCard  animation="wave" />

Component API Skeleton

Name	Type	Default	Description
animation	pulse / wave	pulse	animation types
appearance	circular / rectangular / text / thumbnail / sort	-	types of skeletons
children	ReactNode	-	child components
css	CSSProperties	-	additional styles
color	string	-	change from default color
dataTestId	string	-	test id
height	string	-	set height
width	string	-	set width

Component API Card Skeleton

Name	Type	Default	Description
appearance	circular / rectangular / text / thumbnail / sort	-	types of skeletons
animation	pulse / wave	pulse	animation types
dataTestId	string	-	test id