Components · Status and feedback
Skeleton
Loading placeholder shapes.
Shapes
import { Skeleton } from '@rookcom/monarch-react';
<Skeleton shape="circle" width="2.5rem" height="2.5rem" />
<Skeleton shape="text" width="12rem" />
<Skeleton width="8rem" height="2rem" />Usage examples
The example at the top of the page is the only one for this component.
Purpose
A placeholder shape that holds the layout while content loads.
Use when
- Building a custom loading layout that mirrors the final content.
Avoid when
- A standard list, card grid or detail view: use LoadingState, which also announces loading.
Design principles
- Hidden from assistive technology: mark the loading region
aria-busy="true"and announce completion separately.
API reference
import { Skeleton } from '@rookcom/monarch-react';| Export | Kind | Rendering | Root class |
|---|---|---|---|
Skeleton | component | server-safe | .mn-skeleton |
width and height are merged into style.
Generated from the TypeScript declarations of packages/react/src/components/feedback/skeleton.
Properties
Skeleton
Loading placeholder. Hidden from assistive technology: mark the loading region with aria-busy="true" and announce completion separately.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | |
className | string | |
height | import("/home/runner/work/monarch/monarch/node_modules/csstype/index").Property.Height<string | number> | |
id | string | |
shape | "circle" | "rect" | "text" | |
width | import("/home/runner/work/monarch/monarch/node_modules/csstype/index").Property.Width<string | number> |
Variants
| Prop | Values | Description |
|---|---|---|
shape | 'rect''text''circle' | Default rect. text is 0.75em high; circle is fully rounded. Exposed as data-shape. |
States
| State | Exposed as | Behaviour |
|---|---|---|
| Animating | – | A shimmer animation runs; it is turned off with reduced motion. |
Interaction behaviour
- None.
Keyboard support
Not interactive, so there is no keyboard behaviour.
Accessibility
- Role
- none (aria-hidden)
- Accessible name
- –
- Always
aria-hidden. prefers-reduced-motion: reducestops the shimmer.
Responsive behaviour
- Sizes come from
widthandheight; percentages follow the container.
Theme support
- Fill is
--mn-color-bg-muted, so it adapts to every theme.
Do and don't
Do
- Match the skeleton to the shape of the content that will replace it.
Don't
- Do not rely on Skeleton to tell screen-reader users that content is loading.
Related components
- LoadingState: Ready-made skeleton layouts with an announcement.
- Spinner: Indeterminate progress in a small space.
Dependencies
| Kind | Depends on |
|---|---|
| npm packages | None |
| Monarch components | None |
Testing coverage
- Is hidden from assistive technology.
| Check | Covered |
|---|---|
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |
Tests: packages/react/src/components/feedback/skeleton