Skip to main content
The Accordion component renders an expandable and collapsable section that can contain other components. This component can be helpful for saving space and breaking up extension content.
ui-extensions-accordion-section
import { Accordion, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <>
      <Accordion title="Item One">
        <Text>
          Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and
          nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of
          the world.
        </Text>
      </Accordion>
      <Accordion title="Item Two">
        <Text>Second inner text</Text>
      </Accordion>
    </>
  );
};

Props

PropTypeDescription
children Required
title Required
defaultOpen
disabled
onClick
open
size
testId
Last modified on January 28, 2026