import { Skeleton } from '@uhg-abyss/mobile';

variant

height

width

animated

<Skeleton variant="text" />

Usage

The Skeleton component is a placeholder for content that is loading. It helps convey to users that the page is functioning as intended and that content will appear shortly.

Common Use Cases:

• Displaying a loading state for text, images, or cards.
• Providing a visual cue for asynchronous content.
• Maintaining layout consistency while data is being fetched.

Width and Height

The height and width props define the dimensions of the component. Setting their values to 100% will fill its parent container. The default values for height and width depend on the variant. For more details, refer to the Variant section.

Variant & Alt

The alt prop adjusts the color of the component, changing it to a lighter shade.

The variant prop defines the default size and border radius of the component. Use this prop to match the skeleton's shape to the content it represents.

Available Variants:

• text: The default variant with a height of 20px, a width of 180px, and slightly rounded edges. Ideal for text blocks.
• square: This variant has a default height and width of 48px, with slightly rounded edges. Suitable for square images or icons.
• round: This variant also has a default height and width of 48px, but features fully rounded edges. Best for avatars or circular icons.

Animations & Color

Animation is enabled by default. To disable it, set the animated prop to false. The color prop can be used to customize the color of the component. You can also customize the loader's color and opacity using the loaderColor and loaderOpacity props.

Skeleton with Children

Add children to the Skeleton component by placing elements between the Skeleton tags.

Skeleton Props

Prop Name	Type	Default	Description
alt	boolean	-	sets the skeleton to a lighter shade
animated	boolean	true	Set to false to disable animation
children	node	-	The content within the skeleton
color	string	-	Set the color of the skeleton
height	number | string	100%	Set height of skeleton
loaderOpacity	string	-	Set the opacity of the skeleton loader
loadingColor	string	-	Set the color of the skeleton loader
variant	'text' | 'square' | 'round'	default	Change shape of the skeleton
width	number | string	100%	Set width of skeleton

Skeleton Classes

Class Name	Description
abyss-skeleton-root	Skeleton root element

Skeleton Translations

Translation Key	Value
loading	loading

Component Tokens

Note: Click on the tokens to copy onto your clipboard.

Search tokens

Skeleton Tokens

Token Name	Value
skeleton.color.surface.container.regular	rgba(0, 0, 0, 0.08)
skeleton.color.surface.container.alt	rgba(255, 255, 255, 0.32)
skeleton.color.surface.loader	#FFFFFF
skeleton.border-radius.all.text	4
skeleton.border-radius.all.square	4
skeleton.border-radius.all.round	500

Skeleton Classes

V2	V1	Status
skeleton-root	skeleton-root	Unchanged

Skeleton Props

V2	V1	Status
alt	-	Added
animated	animated	Unchanged
children	children	Unchanged
color	color	Unchanged
height	height	Unchanged
loaderColor	-	Added
loaderOpacity	-	Added
-	stale	Removed
variant	variant	Modified
width	width	Unchanged