Panels

Lightweight containers that optionally collapse their content.

Panels are used for lightweight viewing or editing of content. They can be used in longer forms to group similar content. There is some overlap between cards and panels, but a panel includes a freeform content pane, whereas cards are typically shown in groups with one focused topic and associated action per card. In addition, cards often use imagery to enhance their appearance whereas panels optionally include a simple icon to represent the topic.

Basic Panel

The core components of a panel are a single line header and some detailed content. For example, a data table in an application's dashboard.

At minimum, panels include a PanelHeader and a PanelContent component.

<Panel>
  <PanelHeader title="Basic Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

<Panel>
  <PanelHeader title="Basic Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

Collapsible Panel

A collapsed panel displays summary information. Interaction with the panel header toggles the visibility of the panel content.

Collapsible Panels may be displayed in a sequence to form creation flows. Steps in the process are contained within the panels.

To enable Collapse on the PanelContent, pass the enableCollapse prop.

<Panel enableCollapse>
  <PanelHeader title="Collapsible Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

<Panel enableCollapse>
  <PanelHeader title="Collapsible Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

Default the panel state to open by passing the expanded prop.

<Panel enableCollapse expanded>
  <PanelHeader title="Expanded Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

<Panel enableCollapse expanded>
  <PanelHeader title="Expanded Panel" />
  <PanelContent>Here is some nice content.</PanelContent>
</Panel>

Panel Icon

A visual representation of the panel contents.

An icon component or svg may be passed in the icon prop.

Note: If the icon is necessary to understand the panel contents in addition to the panel title, include the iconLabel prop, ex: iconLabel="Review details".

<Panel enableCollapse>
  <PanelHeader title="Acme Widgets" icon={<Info />} iconLabel="Review details" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

<Panel enableCollapse>
  <PanelHeader title="Acme Widgets" icon={<Info />} iconLabel="Review details" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

Header Customizations

Title Variant & Hierarchy

Define titleVariant as any valid <Typography> variant to customize the title style.

The default title element rendered is <h4>. Use the titleComponent prop to correct the semantic hierarchy as needed for the document outline. For example, if the panel follows an <h2> headline, set titleComponent="h3".

<Panel enableCollapse>
  <PanelHeader title="Information" icon={<Info />} titleVariant="h3" titleComponent="h3" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

<Panel enableCollapse>
  <PanelHeader title="Information" icon={<Info />} titleVariant="h3" titleComponent="h3" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

Secondary Title

Optional secondary title that can be utilized within the Panel Header.

<Panel enableCollapse>
  <PanelHeader title="Information" secondaryTitle="Secondary" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

<Panel enableCollapse>
  <PanelHeader title="Information" secondaryTitle="Secondary" />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

Custom Palette

Pass a custom backgroundColor and/or color to <PanelHeader> for re-enforcing status as for workflows.

<Panel enableCollapse>
  <PanelHeader
    title="Information"
    icon={<Info />}
    style={{ backgroundColor: '#3B50BB', color: '#fff' }}
  />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

<Panel enableCollapse>
  <PanelHeader
    title="Information"
    icon={<Info />}
    style={{ backgroundColor: '#3B50BB', color: '#fff' }}
  />
  <PanelContent>Here is some informational content.</PanelContent>
</Panel>

Extended Header

Add any nodes as children to <PanelHeader> to display an extended header, which will remain visible when the panel is collapsed and be included if a custom palette is provided.

<>
  <Panel enableCollapse>
    <PanelHeader title="Information" icon={<Info />}>
      <Typography color="textSecondary">
        Cotton candy donut lemon drops gingerbread wafer.
      </Typography>
    </PanelHeader>
    <PanelContent>
      <Divider margin={{ bottom: 2 }} />
      <Typography>Here is some informational content.</Typography>
    </PanelContent>
  </Panel>

  <Panel enableCollapse expanded margin={{ top: 4 }}>
    <PanelHeader
      title="Information"
      icon={<Info />}
      style={{ backgroundColor: '#C4CFFF', color: '#3B50BB' }}
    >
      <Typography>Cotton candy donut lemon drops gingerbread wafer.</Typography>
    </PanelHeader>
    <PanelContent>
      <Typography>Here is some informational content.</Typography>
    </PanelContent>
  </Panel>
</>

<>
  <Panel enableCollapse>
    <PanelHeader title="Information" icon={<Info />}>
      <Typography color="textSecondary">
        Cotton candy donut lemon drops gingerbread wafer.
      </Typography>
    </PanelHeader>
    <PanelContent>
      <Divider margin={{ bottom: 2 }} />
      <Typography>Here is some informational content.</Typography>
    </PanelContent>
  </Panel>

  <Panel enableCollapse expanded margin={{ top: 4 }}>
    <PanelHeader
      title="Information"
      icon={<Info />}
      style={{ backgroundColor: '#C4CFFF', color: '#3B50BB' }}
    >
      <Typography>Cotton candy donut lemon drops gingerbread wafer.</Typography>
    </PanelHeader>
    <PanelContent>
      <Typography>Here is some informational content.</Typography>
    </PanelContent>
  </Panel>
</>

Uncontained

Remove the contained, raised appearance by passing the <Paper> prop of elevation={0}. Useful for scenarios such as the controlled accordion.

<>
  <Panel elevation={0}>
    <PanelHeader title="Basic Panel" icon={<Info />} />
    <PanelContent>Here is some informational content.</PanelContent>
  </Panel>
  <Panel elevation={0} enableCollapse margin={{ top: 6 }}>
    <PanelHeader title="Collapsible Panel" icon={<Info />} />
    <PanelContent>Here is some informational content.</PanelContent>
  </Panel>
</>

<>
  <Panel elevation={0}>
    <PanelHeader title="Basic Panel" icon={<Info />} />
    <PanelContent>Here is some informational content.</PanelContent>
  </Panel>
  <Panel elevation={0} enableCollapse margin={{ top: 6 }}>
    <PanelHeader title="Collapsible Panel" icon={<Info />} />
    <PanelContent>Here is some informational content.</PanelContent>
  </Panel>
</>

Controlled Accordion

Useful in cases where flows have dependencies or where users should focus on the content of one panel at a time.

The following demonstrates how to leverage onToggle() to control the expanded state to create an accordion panel.

function ControlledAccordion() {
  const expanded = 'panel1';

  const [panelOpen, togglePanel] = React.useState(expanded);

  const handlePanelToggle = (panel) => (isOpen) => {
    togglePanel(isOpen ? panel : false);
  };

  return (
    <Paper>
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel1'}
        onToggle={handlePanelToggle('panel1')}
        elevation={0}
      >
        <PanelHeader title="Panel 1" icon={<Info />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
      <Divider />
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel2'}
        onToggle={handlePanelToggle('panel2')}
        square
        elevation={0}
      >
        <PanelHeader title="Panel 2" icon={<Mail />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
      <Divider />
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel3'}
        onToggle={handlePanelToggle('panel3')}
        elevation={0}
      >
        <PanelHeader title="Panel 3" icon={<Delete />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
    </Paper>
  );
}

function ControlledAccordion() {
  const expanded = 'panel1';

  const [panelOpen, togglePanel] = React.useState(expanded);

  const handlePanelToggle = (panel) => (isOpen) => {
    togglePanel(isOpen ? panel : false);
  };

  return (
    <Paper>
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel1'}
        onToggle={handlePanelToggle('panel1')}
        elevation={0}
      >
        <PanelHeader title="Panel 1" icon={<Info />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
      <Divider />
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel2'}
        onToggle={handlePanelToggle('panel2')}
        square
        elevation={0}
      >
        <PanelHeader title="Panel 2" icon={<Mail />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
      <Divider />
      <Panel
        enableCollapse
        expanded={panelOpen === 'panel3'}
        onToggle={handlePanelToggle('panel3')}
        elevation={0}
      >
        <PanelHeader title="Panel 3" icon={<Delete />}></PanelHeader>
        <PanelContent>
          These panels are working as coordinated accordions, with the first panel defaulted open.
        </PanelContent>
      </Panel>
    </Paper>
  );
}