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​

    Name
    Type
    		DefaultA11yDescription
    animated
    boolean | undefined
    true
    If true, the Skeleton will be animated
    className
    string | undefined
    CSS class name to apply to each element within the component
    css
    CSSProperties | Partial<Record<"abyss-skeleton-root", CSSProperties>> | undefined
    Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
    See CSS Prop Styling for more information
    data-testid
    string | undefined
    Suffix used to create a unique ID used for automated testing
    See Component Testing for more information
    disableDefaultProviderProps
    boolean | undefined
    false
    If set to true, the component will not use the DefaultPropsProvider values.

    If you aren’t using the DefaultPropsProvider, this prop can be ignored.
    height
    string | number | undefined
    '100%'
    Set height of Skeleton
    hiddenFrom
    Breakpoint | undefined
    When defined, the component is hidden once the screen width reaches the specified breakpoint.
    loadingText
    string | undefined
    'Loading'
    Screen reader text to announce while the Skeleton is active
    slotProps
    Partial<Record<"skeleton-root", SlotPropsLeafValue>> | undefined
    Props to pass to individual internal slots of the Skeleton component.
    See slotProps for more information
    variant
    "default" | "alternate" | undefined
    'default'
    The color variant of the Skeleton
    visibleFrom
    Breakpoint | undefined
    When defined, the component is hidden until the screen width reaches the specified breakpoint.
    width
    string | number | undefined
    '100%'
    The width of the Skeleton

    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