Skeleton
A placeholder that holds the shape of content while it loads.
mq-skeleton is the SDK's skeleton as a design-system primitive. It ships from
@mediquo/ui as a custom element and as a React component.
Install
// Custom element — the import registers <mq-skeleton>
import "@mediquo/ui/components/skeleton";// React
import { Skeleton } from "@mediquo/ui/react/skeleton";Size and shape
width and height take any CSS length and default to 100% and 20px — one
line of body text across its container. border-radius is one of none,
sm (the default), md, lg, xl, 2xl and full; full with a matching
width and height draws a circle for an avatar.
<Skeleton width="40px" height="40px" borderRadius="full" />
<Skeleton width="60%" height="16px" />Accessibility
- The skeleton says nothing. It renders an empty block, so a screen reader
skips it. Announce the loading state on the region that is loading — for
example
aria-busy="true"on its container — and clear it when the content arrives. - The pulse stops under
prefers-reduced-motion: reduce, and forced-colours mode draws the block in the system's grey so it stays visible.
Styling
The component uses --mq-* tokens with literal fallbacks.
--mq-skeleton-background overrides the fill, and part="skeleton" reaches the
block.