Skeleton API
API reference for the Skeleton component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.
Demos
For usage examples, visit the component demo page: Skeleton
Import
import { Skeleton } from '@soroush.tech/design-system/Skeleton'Skeleton-specific props
variant
Controls the shape via a default border-radius.
| Value | default border-radius |
|---|---|
"text" | theme.radii.sm (4px) |
"circular" | 50% |
"rectangular" | theme.radii.sq (0) |
Default: "text". The text variant with no height takes one line's height via an inserted non-breaking space. Use borderRadius for rounded rectangles.
borderRadius
Overrides the variant's default corner radius - resolves against theme.radii. The circular variant ignores it - a circle always stays 50%.
| Token | Value |
|---|---|
"sq" | 0 |
"sm" | 4px |
"md" | 8px |
"lg" | 16px |
"12px" | raw |
<Skeleton variant="rectangular" borderRadius="md" width="100%" height={120} />
animation
| Value | Effect |
|---|---|
"pulse" | Opacity fade (default). Size-independent. |
"wave" | Viewport-anchored shimmer sweep. Size-independent. |
false | No animation. |
Default: "pulse".
width / height
number | string. A number resolves to px; a string is used as-is ('10rem', '50%'). When width is omitted and children are present, width becomes fit-content so the skeleton matches the content it stands in for.
children
Optional content used only to infer width and height - it is rendered invisibly (visibility: hidden) so the skeleton sizes to it.
<Skeleton>
<Typography variant="h3">Loading title</Typography>
</Skeleton>
Styled-system props
Skeleton accepts margin props (m, mt, mr, mb, ml, mx, my) - resolved against theme.space. Padding is intentionally excluded. The root element can be changed with as.
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.