Skip to main content

Skeleton

Placeholder for loading content.

github
View source code
figma
View design

Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.
Component Guide
import { Skeleton } from '@uhg-abyss/web/ui/Skeleton';
    () => {
      return <Skeleton height={100} width={100}></Skeleton>;
    };

    Usage​

    Skeleton is a placeholder component for content that is loading. Skeleton can help convey to users that content is on its way and the page is functioning as intended.

    Width and height​

    Use the width and height props to size the Skeleton. The default settings are 100% for both width and height so if no values are provided, the skeleton will fill the parent container.

    Variant​

    Use the variant prop to control the color of the Skeleton component. The default is 'default' which displays with a transparent black color. The variant 'alternate' is displayed with a transparent white, intended for dark backgrounds.

    Animated​

    Animation is enabled by default. If you'd like to disable animation pass in the animated prop and set to a value of false.

    Loading text​

    Use the loadingText prop to specify the offscreen text to be read by the screen reader during loading. Default is 'Loading'.

    Tip

    When using more than one skeleton loader on a page, it is recommended that only one of them supplies the offscreen loading text. You can set loadingText to an empty string ("") on the others to prevent any offscreen text from being generated and read by the screen reader.

    Skeleton Props​

    NameTypeDefaultRequiredDescription
    animated
    boolean | undefined
    true
    		-
    If true, the Skeleton will be animated
    height
    number | string | undefined
    '100%'
    		-
    Set height of Skeleton
    loadingText
    string | undefined
    'Loading'
    		-
    Screen reader text to announce while the Skeleton is active
    variant
    'default' | 'alternate' | undefined
    'default'
    		-
    The color variant of the Skeleton
    width
    number | string | undefined
    '100%'
    		-
    The width of the Skeleton

    Below are the link(s) to the relevant GitHub type files:

    Abyss.d.ts

    Skeleton Classes​

    Class NameDescription
    .abyss-skeleton-rootSkeleton root element

    Reduced motion​

    Animations and transitions that have been changed when a user has prefers-reduced-motion set to reduced:

    • animated no longer applies even when set to true

    Loading announcement​

    When there is more than one skeleton element, use loadingText="" to eliminate redundant announcements for screen reader users.

    Component Tokens​

    Tip

    Click on the token row to copy the token to your clipboard.

    Skeleton Tokens​

    Token NameValue
    skeleton.color.surface.container.default
    #000000
    skeleton.color.surface.container.alt
    #FFFFFF
    skeleton.border-radius.all.container
    4px
    skeleton.opacity.surface.container.default
    0.08
    skeleton.opacity.surface.container.alt
    0.32
    Table of Contents