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

variant

height

width

animated

() => {
  return <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

Name	Type	Default	Required	Description
alt	boolean | undefined	-	-	toggles alt version of the skeleton
animated	boolean | undefined	true	-	Set to false to disable animation
children	React.ReactNode | undefined	-	-	The content placed within the skeleton
color	Abyss.Color | undefined	-	-	Set the color of the skeleton
height	Abyss.Size | undefined	'text: 24 | square: 48 | round: 48'	-	Set the height of the skeleton, value differs based on variant
loaderColor	Abyss.Color | undefined	'$skeleton.color.surface.loader'	-	Set the color of the animated skeleton loader
loaderOpacity	number | undefined	0.6	-	Set the opacity of the animated skeleton loader
variant	'text' | 'square' | 'round' | undefined	'text'	-	Change shape of the skeleton
width	Abyss.Size | undefined	'text: 180 | square: 48 | round: 48'	-	Set width of skeleton, value differs based on variant

Skeleton Classes

Class Name	Description
abyss-skeleton-root	Skeleton root element

Skeleton Translations

Translation Key	Value
loading	Loading

Component Tokens

Tip

Click on the token row to copy the token to your clipboard.

Skeleton Tokens

Search 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