LoadingButton | UI components

The LoadingButton component renders a button with loading state options. It includes the same props as the Button component with a few additional props for managing loading state.

import React from "react";
import { useState } from "react";
import { Flex, Heading, LoadingButton, hubspot } from "@hubspot/ui-extensions";

hubspot.extend(({ actions }) => <Extension actions={actions} />);

function fakeFetchContactName() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ firstname: "Tom", lastname: "Bombadil" });
    }, 1000);
  });
}

function Extension() {
  const [isFetching, setIsFetching] = useState(false);
  const [contactName, setContactName] = useState("");

  async function handleClick() {
    setIsFetching(true);
    const { firstname, lastname } = await fakeFetchContactName();

    setContactName(`${firstname} ${lastname}`);
    setIsFetching(false);
  }

  return (
    <Flex direction="column" gap="md" align="start">
      <LoadingButton loading={isFetching} onClick={handleClick}>
        Fetch Name
      </LoadingButton>
      {!isFetching && contactName !== "" && <Heading>{contactName}</Heading>}
    </Flex>
  );
}

Props

Prop	Type	Description
`disabled`	Boolean	When set to `true`, the button will render in a greyed-out state and cannot be clicked.
`href`	String \| Object	Include this prop to open a URL on click. Can be set to a URL string or an object with the following fields: `url` (string): the URL that will open on click. `external` (boolean, optional): set to `true` to open the URL in a new tab and display an external link icon. By default: Links to HubSpot app pages will open in the same tab and will not include an icon. Links to non-HubSpot app pages will open in a new tab and include the icon. When a button includes both `href` and an `onClick` action, both will be executed on button click.
`loading`	Boolean	Set to `true` to display the loading indicator and disable the button. Default is `false`.
`onClick`	`() => void`	A function that will be invoked when the button is clicked. It receives no arguments and its return value is ignored.
`overlay`	Object	Include a Modal or Panel component in this object to open it as an overlay on click. Learn more about using overlays.
`resultIconName`	String	Set to an icon name to display an icon after loading. By default, will display a check mark.
`size`	`'xs'`, `'extra-small'` \| `'sm'`, `'small'` \| `'med'`, `'medium'` (default)	The size of the button.
`type`	`'button'` (default) \| `'reset'` \| `'submit'`	Sets the `role` HTML attribute of the button.
`variant`	`'primary'` \| `'secondary'` (default) \| `'destructive'`	Sets the color of the button. See variants section for more information.

Opening overlays

Like the Button, Link, Tag, and Image components, the LoadingButton component can open an overlay. In addition, you can use the overlayOptions prop to trigger the overlay either on click or when the loading has finished.

import React from "react";
import { useState } from "react";
import { Flex, Heading, LoadingButton, Panel, PanelBody, PanelSection, hubspot } from "@hubspot/ui-extensions";

hubspot.extend(({ actions }) => <Extension actions={actions} />);

function fakeFetchContactName() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ firstname: "Tom", lastname: "Bombadil" });
    }, 1000);
  });
}

function Extension() {
  const [isFetching, setIsFetching] = useState(false);
  const [contactName, setContactName] = useState("");

  async function handleClick() {
    setIsFetching(true);
    const { firstname, lastname } = await fakeFetchContactName();

    setContactName(`${firstname} ${lastname}`);
    setIsFetching(false);
  }

  return (
    <Flex direction="column" gap="md" align="start">
      <LoadingButton
        loading={isFetching}
        onClick={handleClick}
        overlayOptions={{ openBehavior: "onLoadingFinish" }}
        overlay={
          <Panel title={"Contact name "} id="my-panel">
            <PanelBody>
              <PanelSection>{contactName !== "" && <Heading>{contactName}</Heading>}</PanelSection>
            </PanelBody>
          </Panel>
        }
      >
        Fetch name (overlay)
      </LoadingButton>
    </Flex>
  );
}

Variants

Using the variant prop, you can set the color of the button.

Primary: a dark blue button for the most frequently used or most important action on an extension. Each extension should only have one primary button.

ui-extension-components-loadingbuttons_2

Secondary (default): a grey button to provide alternative or non-primary actions. Each extension should include no more than two secondary buttons.

ui-extension-components-loadingbuttons_1

Destructive: a red button for actions that delete, disconnect, or perform any action that the user can’t undo. Button text should clearly communicate what is being deleted or disconnected. After a destructive button is clicked, the user should have to verify or confirm the action.

ui-extension-components-loadingbuttons_3

Please note:HubSpot does not provide variant options for the orange buttons you’ll find across the app (both solid and outlined). Those color variants are reserved for the HubSpot product, which helps to maintain the hierarchy of available actions on a given page.

Usage examples

Use a 'primary' button at the end of a form to submit data to another system.
Use a 'secondary' button next to a primary form submit button to reset form fields.
Use a 'destructive' button to enable users to delete a contact’s data from an external system.
Set a button to disabled={true} when a contact doesn’t qualify for a form submission due to missing criteria or other ineligibility.

Guidelines

DO: set button text that clearly communicates what action will occur when a user clicks it. Text should be unambiguous and concise (~2-4 words).
DO: use sentence-casing for button text (only the first word capitalized)
DO: minimize the number of buttons that appear on a page record across all extensions.
DO: always open links to pages outside of the HubSpot app in a new tab (external: true).
DON’T: include multiple primary buttons in a single extension.
DON’T: use a destructive button unless the consequences are significant or irreversible.

Build apps

Add features

Publish to the HubSpot Marketplace

Skeleton group 5

LoadingButton | UI components

Props

Opening overlays

Variants

Usage examples

Guidelines

​Props

​Opening overlays

​Variants

​Usage examples

​Guidelines

​Related components

Props

Opening overlays

Variants

Usage examples

Guidelines

Related components