Skip to main content
Kaleidoscope

Panel

AK
BL

A panel is a floating container of components. It provides consistent styling for the surrounds of the container.

Default

By default you get a light-themed floated panel, that wraps the provided children:

Editable example
<div style={{height: "50px"}}>
  <Panel>
    <div className="space-inset-l">
      Welcome to cloud cuckoo land!
    </div>
  </Panel>
</div>

Elevation

Use elevation to represent a panel's stacking position. Defaults to 2, which is appropriate for most dropdowns, popovers, and non-modal dialogs. See the surfaces doc for more info.

Editable example
() => {
  const panelStyle = { width: 128, height: 128, display: "grid", placeContent: "center", position: "relative" };

  return (
    <>
      <Panel elevation={0} style={panelStyle}><Text secondary>Level 0</Text></Panel>
      <Panel elevation={1} style={panelStyle}><Text secondary>Level 1</Text></Panel>
      <Panel elevation={2} style={panelStyle}><Text secondary>Level 2</Text></Panel>
      <Panel elevation={3} style={panelStyle}><Text secondary>Level 3</Text></Panel>
    </>
  );
}

Dark mode

Editable example
<div style={{height: "50px"}}>
  <Panel theme={PanelTheme.Dark}>
    <div className="space-inset-l" style={{color: "white"}}>
      Welcome to cloud cuckoo land at night!
    </div>
  </Panel>
</div>

Best practices

  • A Panel should be used to house information that needs to sit on top of the main layer of content, while keeping the main content within view (e.g. Popover, OptionMenu, Dropdown)
  • Most use cases of the Panel can be better served by the component which makes use of and supersedes the Panel, and implements consistent focus and closing behaviours.