Skeleton

The EuiSkeleton components are placeholder components for content which has yet to load. They provide meaningful previews, avoid layout content shifts, and add accessible announcements to screen readers when content is done loading.

Using the contentAriaLabel prop

Using the

contentAriaLabel prop

The contentAriaLabel prop should be used to help describe the type of content that is loading to screen reader users. If you do not provide a descriptive label and have have multiple loading skeletons on the page, screen reader users may hear a multitude of “Loaded” messages in a row, with no meaningful indication of what actually loaded.

Text

Use EuiSkeletonText to display a placeholder for multiple lines of text.

Title

Use EuiSkeletonTitle to display a placeholder for heading titles.

Circle

Use EuiSkeletonCircle to display a circular preview, mainly for avatars.

Rectangle

EuiSkeletonRectangle allows you define a large and customizable shape via its width, height, and borderRadius props.

Combining multiple skeletons

EuiSkeletonLoading is a light wrapper around the EuiSkeleton components that handles loading accessibility and flipping between skeleton and loaded content.

As you may have noticed in the previous demos, toggling multiple skeletons to their loaded state all at once triggers multiple queued screen reader announcements, which can be annoying to SR users.

To circumvent this, use EuiSkeletonLoading to handle a single parent-level isLoading state. EuiSkeleton children passed to the loadingContent should not have their own isLoading props or children.

EuiSkeleton components assume that the page starts as loading and transitions to loaded, and the default screen reader experience is set up accordingly (announceLoadedStatus={true}).

In scenarios where that is not the case (i.e., transitioning to loading), you can customize what statuses are announced to screen readers by setting announceLoadingStatus to true, or announceLoadedStatus to false. Submitting the below example announces a loading status, but not a loaded status.

As an optional escape hatch, ariaLiveProps is also available and accepts any

EuiScreenReaderLive props.

Props

EuiSkeletonCircle

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type When true, shows the loading skeleton component. When false, shows any `children` and announces to screen readers that your content has loaded. Type: `boolean`	Default value `true`
Prop contentAriaLabel#	Description and type Label your loading sections to provide more helpful context to screen readers. For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys". Type: `string`	Default value
Prop announceLoadingStatus#	Description and type Makes a live screen reader announcement when `isLoading` is true Type: `boolean`	Default value `false`
Prop announceLoadedStatus#	Description and type Makes a live screen reader announcement when `isLoading` is false Type: `boolean`	Default value `true`
Prop ariaLiveProps#	Description and type Optional props to pass to the `aria-live` region that announces the loading status to screen readers. Accepts any `EuiScreenReaderLive` props. Type: `Partial<EuiScreenReaderLiveProps>`	Default value
Prop ariaWrapperProps#	Description and type Optional props to pass to the `aria-busy` wrapper around the skeleton content Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop size#	Description and type Type: `"s" \| "m" \| "l" \| "xl"`	Default value `m`

EuiSkeletonRectangle

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type When true, shows the loading skeleton component. When false, shows any `children` and announces to screen readers that your content has loaded. Type: `boolean`	Default value `true`
Prop contentAriaLabel#	Description and type Label your loading sections to provide more helpful context to screen readers. For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys". Type: `string`	Default value
Prop announceLoadingStatus#	Description and type Makes a live screen reader announcement when `isLoading` is true Type: `boolean`	Default value `false`
Prop announceLoadedStatus#	Description and type Makes a live screen reader announcement when `isLoading` is false Type: `boolean`	Default value `true`
Prop ariaLiveProps#	Description and type Optional props to pass to the `aria-live` region that announces the loading status to screen readers. Accepts any `EuiScreenReaderLive` props. Type: `Partial<EuiScreenReaderLiveProps>`	Default value
Prop ariaWrapperProps#	Description and type Optional props to pass to the `aria-busy` wrapper around the skeleton content Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop width#	Description and type Type: `string \| number`	Default value `24px`
Prop height#	Description and type Type: `string \| number`	Default value `24px`
Prop borderRadius#	Description and type Type: `"s" \| "m" \| "none"`	Default value `s`

EuiSkeletonLoading

Extends HTMLAttributes


Prop	Description and type	Default value
Prop loadingContent#	Description and type Content to display when loading Type: `ReactElement`	Default value Required
Prop loadedContent#	Description and type Content to display when loaded Type: `any`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type When true, shows the loading skeleton component. When false, shows any `children` and announces to screen readers that your content has loaded. Type: `boolean`	Default value `true`
Prop contentAriaLabel#	Description and type Label your loading sections to provide more helpful context to screen readers. For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys". Type: `string`	Default value
Prop announceLoadingStatus#	Description and type Makes a live screen reader announcement when `isLoading` is true Type: `boolean`	Default value `false`
Prop announceLoadedStatus#	Description and type Makes a live screen reader announcement when `isLoading` is false Type: `boolean`	Default value `true`
Prop ariaLiveProps#	Description and type Optional props to pass to the `aria-live` region that announces the loading status to screen readers. Accepts any `EuiScreenReaderLive` props. Type: `Partial<EuiScreenReaderLiveProps>`	Default value

EuiSkeletonTitle

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type When true, shows the loading skeleton component. When false, shows any `children` and announces to screen readers that your content has loaded. Type: `boolean`	Default value `true`
Prop contentAriaLabel#	Description and type Label your loading sections to provide more helpful context to screen readers. For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys". Type: `string`	Default value
Prop announceLoadingStatus#	Description and type Makes a live screen reader announcement when `isLoading` is true Type: `boolean`	Default value `false`
Prop announceLoadedStatus#	Description and type Makes a live screen reader announcement when `isLoading` is false Type: `boolean`	Default value `true`
Prop ariaLiveProps#	Description and type Optional props to pass to the `aria-live` region that announces the loading status to screen readers. Accepts any `EuiScreenReaderLive` props. Type: `Partial<EuiScreenReaderLiveProps>`	Default value
Prop ariaWrapperProps#	Description and type Optional props to pass to the `aria-busy` wrapper around the skeleton content Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop size#	Description and type EuiTitle size to render Type: `"xs" \| "s" \| "m" \| "l" \| "xxxs" \| "xxs"`	Default value `m`

EuiSkeletonText

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isLoading#	Description and type When true, shows the loading skeleton component. When false, shows any `children` and announces to screen readers that your content has loaded. Type: `boolean`	Default value `true`
Prop contentAriaLabel#	Description and type Label your loading sections to provide more helpful context to screen readers. For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys". Type: `string`	Default value
Prop announceLoadingStatus#	Description and type Makes a live screen reader announcement when `isLoading` is true Type: `boolean`	Default value `false`
Prop announceLoadedStatus#	Description and type Makes a live screen reader announcement when `isLoading` is false Type: `boolean`	Default value `true`
Prop ariaLiveProps#	Description and type Optional props to pass to the `aria-live` region that announces the loading status to screen readers. Accepts any `EuiScreenReaderLive` props. Type: `Partial<EuiScreenReaderLiveProps>`	Default value
Prop ariaWrapperProps#	Description and type Optional props to pass to the `aria-busy` wrapper around the skeleton content Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop lines#	Description and type Number of lines to display (between 1 to 10) Type: `5 \| 2 \| 8 \| 3 \| 6 \| 1 \| 4 \| 7 \| 9 \| 10`	Default value `3`
Prop size#	Description and type EuiText size to render Type: `"xs" \| "s" \| "m" \| "relative"`	Default value `m`

Text.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}

Title

Circle

Rectangle

Combining multiple skeletons

Customizing screen reader announcements

Props

Text