Default
Preserve the space content will use
Skeleton follows the geometry of the resolved profile row, preventing the surrounding layout from shifting.
Text
Suggest hierarchy and natural rhythm
Combine heading and text variants. Shorten selected lines to reflect the expected copy rather than creating a uniform block.
Shapes
Match recognizable interface geometry
Use purpose-built shapes for identity, icons, media, and controls. Custom properties support exceptional dimensions.
Composition
Build the placeholder inside the real container
The Card supplies layout and spacing. Skeleton represents only the content that has not arrived.
Static
Remove movement when activity is not the message
The static variant preserves the same visual structure without shimmer. Reduced-motion preferences also stop repeated animation automatically.
Accessibility
Announce the region once
Hide visual shapes from assistive technology. The region owns aria-busy="true" and one concise Status identifies the content being loaded.
aria-busy="true"Applied to the affected regionaria-hidden="true"Applied to the placeholder grouprole="status"Used once for the loading messageUsage guidance
Match the content, then leave cleanly.
Use Skeleton only when the expected layout is known. Clear the busy state and replace the complete placeholder group when content arrives.
Next component: Alert