Skip to main content

Skeleton

Placeholder for loading content.

Submit feedback
Edit this page
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';
    <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'.

    Note: When using more than one skeleton loader on a page, it's recommended that only one of the skeleton loaders supply the offscreen loading text. You can pass in an empty string, "", to prevent any offscreen text from being generated and read by the screen reader.

    Skeleton Props

    NameTypeDefaultRequiredDescription
    animated
    boolean
    true
    		-
    If true, the Skeleton will be animated
    className
    string
    		--
    CSS class name to apply to each element within the component
    css
    Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>
    		--
    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
    		--
    Suffix used to create a unique ID used for automated testing
    See Component Testing for more information
    disableDefaultProviderProps
    boolean
    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
    '100%'
    		-
    Set height of Skeleton
    loadingText
    string
    'Loading'
    		-
    Screen reader text to announce while the Skeleton is active
    variant
    "default" | "alternate"
    'default'
    		-
    The color variant of the Skeleton
    width
    string | number
    '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

    Note: 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