Last modified: August 22, 2025
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..." />;
};
PropTypeDescription
labelStringThe text that displays next to the spinner.
showLabelBooleanWhen 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.