Skeleton loaders
Replaces content while it's in a loading state.
Page navigation navigation
SkeletonText
SkeletonText shows a placeholder for loading text to improve perceived performance.
Avoid using it for interactive elements such as buttons. Instead, hide them until loading is complete and they're ready for interaction.
React examples
Default
Multiple lines of text
Custom SkeletonText size
SkeletonText matches the font sizes and line heights in Primer. See typography docs and Primer Primitives for details.
With max width
Props
| Name | Default | Description |
|---|---|---|
size | 'bodyMedium' | 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle'Size of the text that the skeleton is replacing. |
lines | 1 | numberNumber of lines of skeleton text to render. |
maxWidth | stringMaximum width that the line(s) of skeleton text can take up. Accepts any valid CSS | |
className | stringClass name for custom styling. |
SkeletonAvatar
SkeletonAvatars are placeholders for loading Avatars. They support the same variants as the Avatar component.
React examples
Default
Custom size
Square variant
Props
| Name | Default | Description |
|---|---|---|
size | 20 | number | { narrow?: number; regular?: number; wide?: number; }The size of the avatar in pixels. |
square | false | booleanIf true, the avatar will be square instead of circular. |
className | stringClass name for custom styling. |
SkeletonBox
A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images) that are still loading. You can adjust width and height to match the content's dimensions.
React examples
Custom width and height
Props
| Name | Default | Description |
|---|---|---|
width | stringWidth of the skeleton box. Accepts any valid CSS | |
height | 1rem | stringHeight of the skeleton box. Accepts any valid CSS |
className | stringThe className of the skeleton box | |
sx | SystemStyleObject |