Examples
Default
Bare skeleton. Fills its container's width at the base PF v6 height token. Provide
screenreaderText so assistive tech announces loading state.
Default skeleton fills its container's width and uses the base height. Add
screenReaderText so assistive tech announces that something is loading.
Percentage widths
Pass width="25"|"33"|"50"|"66"|"75" to constrain the skeleton to a fraction of its
container.
Percentage heights
height="25"|"50"|"75"|"100" works the same way — but the parent must have an explicit
height for the percentage to resolve.
Percentage heights require a parent with an explicit height (the wrapper here is
200px tall).
Text modifiers
fontSize="sm".."4xl" sets the skeleton's height to the matching text-size token. Use for
line-skeleton placeholders inside content blocks.
Shapes
shape="circle"|"square" — pair with matching width / height for the size. The right-hand
example uses widthValue + heightValue for a pixel-exact
circle the tokens don't cover.
shape("circle").width("sm").height("sm")
shape("circle").width("md").height("md")
shape("square").width("md").height("md")
widthValue("80px").heightValue("80px")
Skeleton card
A gallery of compact cards whose contents are skeleton placeholders.
Documentation
Skeleton props
Parameters accepted by
{#include components/feedback/skeleton ... /}. Model mode: pass
skeleton=<Skeleton> built in Java instead — the Java tab on each example shows
the builder.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — | DOM id. |
shape
|
"circle" | "square"
|
— |
Applies pf-m-circle or pf-m-square. Pair with
matching width + height (or their
Value counterparts) to size the shape.
|
width / height
|
"sm" | "md" | "lg" | "25" | "33" | "50" | "66" | "75" (+
"100" for height)
|
— |
Modifier tokens. Each renders the matching pf-m-{axis}-{value} class.
Percentage tokens (25 / 33 / 50 / 66 / 75 / 100) require the parent to have an explicit size on that
axis.
|
widthValue / heightValue
|
CSS length ("200px", "10rem", …)
|
— |
Emits an inline style="width: ...; height: ...". Use when the modifier tokens
don't match the size you need (pixel-exact avatars, oddly-sized placeholders). Mutually exclusive with the
token form for that axis.
|
fontSize
|
"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
|
— |
Renders pf-m-text-{value}; sets the height to the matching PF v6 text-size
token. Useful for line-skeleton placeholders that should match the line heights of surrounding paragraphs /
headings.
|
screenreaderText
|
String | — |
Text wrapped in pf-v6-screen-reader for assistive tech. Always set so a screen
reader announces that something is loading.
|
Divergence from PF React. PF exposes width /
height as free-form CSS length strings. We split that into two params per axis —
modifier tokens (width) for the common percentages and t-shirt sizes, plus
widthValue for arbitrary lengths. This keeps the modifier classes discoverable while
still allowing pixel-exact shapes. PF's className is React-specific; skipped.
Usage
Match the skeleton to its content. Use
fontSize
with the same size as the heading or body text the skeleton replaces — when the content arrives, the layout doesn't
shift. For media (avatars, thumbnails), use the
shape + width/height combo so the placeholder matches the loaded shape's geometry.
Token vs. value precedence. If you set both width (token) and
widthValue (CSS length), both apply — the modifier class sets a width via the token,
and the inline style overrides it. Stick to one form per axis.
HTMX swap-in pattern. Render the skeleton from the server during the first request; swap it for the
real content via HTMX's hx-get + hx-trigger="load" on the
same element. The skeleton's screenreaderText covers the gap before the swap happens.
Don't over-skeletonise. Skeletons help when the load takes more than a few hundred milliseconds. For fast responses, a plain spinner or no indicator at all reads less cluttered.