HomeStarbucks Pattern Library



A general-purpose loading indicator for use during data requests and errors are displayed to users.


  • activebool[false]

    A flag indicating that the loading indicator is active and should be displayed.

  • errorbool[false]

    A flag indicating there is an error is currently being displayed to the user.




  • backgroundClassNamestring

    Overrides the background class

  • childrenfunc[() => {}]

    Function returning properties used to render the ripple and apply required event listeners to the ripple's parent. Returns an object with the following properties:

    • ripple: The renderable React ripple element. Place within the element that should ripple. Note: the element containing the ripple must have position: relative. It can optionally use overflow: hidden to keep the ripple within the bounds of the element.
    • eventHandlers: Event handlers used to enable ripples. Pass to the element that should ripple.
    • mergeEventHandlers: A function used to create ripple event handlers merged with event handlers from element that should ripple. Takes props of target element as parameter, and returns eventHandlers object. This function is only necessary if the component using ripple must support its own onTouchStart and onMouseDown event handlers. Otherwise, just use the eventHandlers property.
  • darkbool

    Inverts ripple color scheme, making it dark instead of light.



A hr element that allows the use of padding instead of margin.


  • visualStyleoneOf('negative')

    Change the color to transparent white if rule is on a dark background. Default is transparent black.

  • weightoneOf('thin')

    Change the weight (thickness) of the rule.



Tracks visibility of child elements and returns a flag indicating whether children are in the browser's viewport. Uses IntersectionObserver and if using an older browser that doesn't support that, the valueIfNotSupported prop value will be returned.


  • childrenfunc*

    Child function with boolean parameter: isIntersecting, function unobserve that can be called when wanting to stop observing the element, and elementRef that needs to be passed in to the element that is being observed

  • completelyVisiblebool

    Flag indicating that the checker shouldn't fire until the element is completely visible with all four edges in the viewport. By default, the checker fires as soon as any edge of the element is in the viewport. DEPRECATION WARNING: 'completelyVisible' will be removed in an upcoming version. Please use percentVisible and a value of 100 if you want to get the same functionality of using completelyVisible.

  • onIntersectionfunc[() => {}]

    Called when element becomes visible, useful for integrating with external libraries and for triggering events.

  • percentVisiblenumber

    Percent of the element that is visible threshold for triggering onIntersection. For example, a value of 50 will trigger onIntersection if the element is 50% visibile. Only values between 0 and 100 (inclusive of 100) are valid.

  • unobserveOnIntersectionbool[false]

    Prop to have the ViewportChecker automatically unobserve after the first intersection. By default, the ViewportChecker will keep checking if the element is in the viewport or not after the first time.

  • valueIfNotSupportedbool[true]

    The value that will be returned for isIntersecting when IntersectionObserver is not supported by the browser (IE 11).

  • xThresholdnumber[0]

    Pixel value threshold for triggering onIntersection on x-axis. For example, a value of 600 will trigger onIntersection if the element comes within 600px of the viewport edge on the x-axis.

  • yThresholdnumber[0]

    Pixel value threshold for triggering onIntersection on y-axis. For example, a value of 600 will trigger onIntersection if the element comes within 600px of the viewport edge on the y-axis.

Example: ViewportChecker reacts to your target element's visibility on the page

Example: Unobserves on first intersection