LoadingSpinner | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The LoadingSpinner component renders a visual indicator for when an extension is loading or processing data.

design-guidelines-loading-spinners

  1. Label: the text that describes the loading state.
  2. Size: the size of the component. From left to right: extra small ('xs'), small ('sm', default), medium ('md').
  3. Layout: the positioning of the spinner. From left to right: inline, centered.
import { LoadingSpinner } from '@hubspot/ui-extensions'; const Extension = () => { return ( <LoadingSpinner label="Loading..." /> ); };
Prop Type Description
label Required String The text that displays next to the spinner.
showLabel Boolean When set to true, the label will appear next to the spinner. Default is false.
size 'xs', 'extra-small' | 'sm', 'small' (default) | 'md', 'medium' The size of the spinner.
layout 'inline' (default) | 'centered' The position of the spinner

Usage examples

  • A loading state after the user submits form data to an external system (e.g., "Submitting contact details").
  • A loading state as the card retrieves customer purchase history from an external system (e.g., "Loading purchase history").

Guidelines

  • DO: keep label text as concise as possible.
  • DO: use label text to describe what's happening during the loading process.
  • DO: use complete sentences in label text.
  • DON'T: include multiple loading spinners at once in a single card to avoid confusion.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.