RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Skeleton

Skeleton is a component that displays a loading state for a component.

Basic Usage

Renders a single text skeleton line.

<template>
  <HLSkeleton id="skeleton-1" text />
</template>
<script setup lang="ts">
import { HLSkeleton } from '@platform-ui/highrise'
</script>

Multi Lines

Stacks multiple skeletons of varying widths to mimic a block of text.

<template>
  <HLSpace :size="10" vertical id="skeleton-2-wrap">
    <HLSkeleton width="70%" height="24px" id="skeleton-2" />
    <HLSkeleton width="100%" height="16px" id="skeleton-3" />
    <HLSkeleton width="90%" height="16px" id="skeleton-4" />
    <HLSkeleton width="80%" height="16px" id="skeleton-5" />
  </HLSpace>
</template>
<script setup lang="ts">
import { HLSkeleton, HLSpace } from '@platform-ui/highrise'
</script>

Composed Layout

Combines fixed-size and repeated skeletons to outline a more complex content placeholder.

<template>
  <HLSpace :size="10" vertical id="skeleton-6-wrap">
    <HLSkeleton width="60px" height="60px" id="skeleton-6" />
    <HLSkeleton width="60%" height="24px" id="skeleton-7" />
    <HLSkeleton width="90%" height="16px" :repeat="2" id="skeleton-8" />
  </HLSpace>
</template>
<script setup lang="ts">
import { HLSkeleton, HLSpace } from '@platform-ui/highrise'
</script>

Static

Disables the shimmer animation with :animated="false" and renders a non-animated skeleton.

<template>
  <HLSkeleton width="200px" height="24px" :animated="false" id="skeleton-9" />
</template>
<script setup lang="ts">
import { HLSkeleton } from '@platform-ui/highrise'
</script>

Non-rounded

Renders square corners with :round="false".

<template>
  <HLSkeleton width="200px" height="24px" :round="false" id="skeleton-10" />
</template>
<script setup lang="ts">
import { HLSkeleton } from '@platform-ui/highrise'
</script>

Accessibility

• Keep skeleton placeholders aria-hidden="true" so they never read as actual content.
• Mark the parent container aria-busy="true" until real data replaces the skeletons.

Imports

import { HLSkeleton } from '@platform-ui/highrise'

Props

Prop	Type	Default	Description
id *	string	undefined	ID of the skeleton
text	boolean	true	Text skeleton
repeat	number	1	Number of times to repeat
width	string | number	'100%'	Width of the skeleton
height	string | number	'18px'	Height of the skeleton
animated	boolean	true	Whether to animate the skeleton
round	boolean	true	Whether to have rounded corners on the skeleton