> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: b15561f3-ebd2-4ede-8e8d-ffed431641b4
---

# Heading

> Learn about the Heading component for use in UI extensions.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

The `Heading` component renders large heading text. Use this component to introduce or differentiate sections of your component.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guide-heading-component.png" alt="design-guide-heading-component" />
</Frame>

```jsx theme={null}
import { Heading } from "@hubspot/ui-extensions";

const Extension = () => {
  return <Heading>Heading text</Heading>;
};
```

## Props

<ComponentProps autoGenerated componentName="Heading">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.</>} />

  <ComponentProp name="inline" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, text will not line break.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## 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.

## Related components

* [Text](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text)
* [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link)
* [Accordion](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/accordion)