Text / title
Line placeholders for copy.
Loading placeholders — text, title, controls, and block shapes.
Live
<span class="skeleton skeleton--title" aria-hidden="true"></span>
<span class="skeleton skeleton--text" aria-hidden="true"></span>
<span class="skeleton skeleton--button" aria-hidden="true"></span>
<span class="skeleton skeleton--block" aria-hidden="true"></span>import { Skeleton } from 'caustica-design/core'
import 'caustica-design/css'
<Skeleton variant="title" />
<Skeleton variant="text" />
<Skeleton variant="button" />
<Skeleton variant="block" />Line placeholders for copy.
Button, pill, badge, chip shapes.
Large content placeholder.
aria-hidden.aria-busy / live region if needed.| Class | Description |
|---|---|
.skeleton |
Base shimmer. |
.skeleton--text / --title |
Line shapes. |
.skeleton--pill / --badge / --chip / --button |
Control shapes. |
.skeleton--block |
Large block. |
From src/core/Skeleton.tsx — extends HTMLAttributes<HTMLSpanElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
SkeletonVariant |
'text' |
text | title | pill | badge | button | block | chip. |