Components
Skeleton
A placeholder shape shown while content loads.
Skeleton fills the space content will take while it loads. It is a Server Component.
import Skeleton from '@hone-ui/react/Skeleton';Examples
<Skeleton width={210} sx={{ fontSize: '1rem' }} />
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} animation="wave" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text', 'rectangular', 'rounded', 'circular' | 'text' | The shape. |
animation | 'pulse', 'wave', false | 'pulse' | The animation. false turns it off. |
width | number, string | The width. A number is pixels. | |
height | number, string | The height. A number is pixels. | |
component | ElementType | 'span' | The element to render. |
sx, className, style, ref, children | Standard. Children size the skeleton, unseen. |
Notes
- Skeleton does not read
components.Skeleton.defaultProps, because it stays a Server Component. - A
textskeleton takes the height of one line of the current font, so setfontSizeto match the text it stands in for. - Animations stop when the user asks for reduced motion.
Accessibility
Skeleton is aria-hidden. Set aria-busy="true" on the region that is loading.