Skeleton
import { Skeleton } from '@enmovil/ui-design-system';
Placeholder shapes shown while content loads. variant chooses a full layout (avatar, title and paragraph rows) or a single element such as an avatar, button, input or image.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
variant | string | No | 'layout' | 'button', 'title', 'image', 'input', 'layout', 'avatar', 'node', 'paragraph' | Determines the skeleton variant (layout or individual component type). |
avatarShape | string | No | 'circle' | 'circle', 'square' | Shape of avatar placeholder. |
buttonShape | string | No | 'default' | 'default', 'circle', 'round', 'square' | Shape of button skeleton. |
paragraphRows | number | No | 3 | — | Number of rows in paragraph (only for variant="paragraph"). |
active | boolean | No | true | — | Displays a loading animation if true. |
loading | boolean | No | true | — | Whether to show the skeleton placeholder. |
avatar | boolean | SkeletonAvatarProps | No | true | — | Display avatar placeholder (layout only). |
title | boolean | SkeletonTitleProps | No | true | — | Display title placeholder (layout only). |
paragraph | boolean | SkeletonParagraphProps | No | { rows: 3 } | — | Controls paragraph placeholder or row settings (layout only). |
size | string | No | 'default' | 'default', 'small', 'large' | Size of avatar, button, or input skeleton. |
Other attributes
Skeleton passes 10 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
This component has no events.
Children
Skeleton does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Layout Skeleton example.
Loading playground…
Storybook
Open Skeleton in Storybook to try every story with the full set of controls.