Panel | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The Panel component renders a panel on the right side of the page and contains other components. The panel can be opened and closed by using onClick handles for Button, Link, Tag, and Image components. Learn more about how to open a panel in your UI extension.

To see an example of incorporating a panel into an extension, check out HubSpot's Build a multi-step flow sample project.

panel-example-gif

The Panel component uses three subcomponents to control its design and content, which follows the general structure below:

  • <Panel>: the outermost container. It must be a top-level component. You cannot put a Panel inside another component, such as Flex.
    • <PanelBody>: the container that wraps the panel's content and makes it scrollable. Include only one PanelBody per Panel.
      • <PanelSection>: a container that adds padding and bottom margin to provide spacing between content. You can use Flex and Box to further customize content layout.
    • <PanelFooter>: a sticky footer component at the bottom of the panel. Include only one PanelFooter per Panel.

A panel can be opened and closed through an event triggered by the onClick event in Button, Link, Tag, and Image components. Learn more about opening panels.

Please note:

  • Only one panel can be open at a time. Opening a panel while another is already open will cause the first panel to close.
  • If your onClick function to open the panel is asynchronous, ensure that it returns a promise.
import { Panel, PanelBody, PanelSection, PanelFooter, Form, Select, Button } from '@hubspot/ui-extensions'; const Extension = () => { return( <> <Panel title="Welcome to my Panel" id="my-panel"> <Form> <PanelBody> <PanelSection> <Select name="test" label="Test" options={[ {label: 'foo', value: 'foo'}, {label:"bar", value: "bar"}]} /> </PanelSection> <PanelSection> lorem ipsum... </PanelSection> </PanelBody> <PanelFooter><Button type="submit">Click me</Button></PanelFooter> </Form> </Panel> <Button onClick={(event, reactions) => { reactions.openPanel('my-panel')}}> Open Panel </Button> </> ); };

Below are the props available for Panel and PanelSection.

Panel props

Prop Type Description
id  Required String A unique ID for the panel.
onOpen onOpen() => void A function that will be invoked when the panel has finished opening.
onClose onClose() => void A function that will be invoked when the panel has finished closing.
width  'sm', 'small' (default) | 'md', 'medium'| 'lg', 'large' The width of the panel.
title String The text that displays at the top of the panel.
variant 'modal' | 'default' (default) The panel variant. The modal variant includes better screen reader focus on the panel and is recommended for visual and motor accessibility and tab navigation.
aria-label String The panel's accessibility label.

PanelSection props

Prop Type Description
flush Boolean When set to true, the section will have no bottom margin. Default is false.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.