Last modified: August 22, 2025
The Heading component renders large heading text. Use this component to introduce or differentiate sections of your component.
design-guide-heading-component
import { Heading } from '@hubspot/ui-extensions';

const Extension = () => {
  return <Heading>Heading text</Heading>;
};
PropTypeDescription
inlineBooleanWhen set to true, text will not line break.

​
Usage example

The title at the top of an extension to introduce its content.

​
Guidelines

  • DO: use headers to give users a summary of the information that the extension contains.
  • DON’T: use more than one heading for each page or section in the extension.
  • DON’T: use headers for paragraphs or long sentences.