Split Pane

The SplitPane component divides a surface into resizable start and end panes.

Usage & Examples

Editor Layout

Navigation
Preview panel
editor-layout.tsx
<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

Visual variants

Themes

primary
Navigation
Preview panel
secondary
Navigation
Preview panel
tertiary
Navigation
Preview panel
quaternary
Navigation
Preview panel

States

success
Navigation
Preview panel
warning
Navigation
Preview panel
error
Navigation
Preview panel
info
Navigation
Preview panel

Sizes

25
Navigation
Preview panel
40
Navigation
Preview panel
60
Navigation
Preview panel
75
Navigation
Preview panel

Variants

solid
Navigation
Preview panel
outline
Navigation
Preview panel
glass
Navigation
Preview panel

Rounding

none
Navigation
Preview panel
medium
Navigation
Preview panel
large
Navigation
Preview panel

Shadows

none
Navigation
Preview panel
light
Navigation
Preview panel
strong
Navigation
Preview panel
visual-variants.tsx
// Themes
<SplitPane theme="primary"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane theme="secondary"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane theme="tertiary"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane theme="quaternary"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

// States
<SplitPane state="success"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane state="warning"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane state="error"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane state="info"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

// Sizes
<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={25}
  />
<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={40}
  />
<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={60}
  />
<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={75}
  />

// Variants
<SplitPane variant="solid"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane variant="outline"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane variant="glass"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

// Rounding
<SplitPane rounding="none"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane rounding="medium"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane rounding="large"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

// Shadows
<SplitPane shadow="none"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane shadow="light"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
<SplitPane shadow="strong"
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

Interaction states

Disabled
Navigation
Preview panel
Loading
Navigation
Preview panel
interaction-states.tsx
// Disabled
<SplitPane disabled
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />
// Loading
<SplitPane loading
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

Props API

25 props
Columns
Split Pane props API
Default
Description
childrenReactNodeNoprops—Fallback children. When two children are supplied, they are used as start/end panes.
classNamestringNostyling—Additional class name for the root.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultSizenumberNoprops50Initial size of the start pane as a percentage.
disabledbooleanNopropsfalseWhether the split pane is disabled.
endPaneReactNodeNoprops—Content rendered in the second pane.
endPaneClassNamestringNoprops—Additional class name for the end pane.
loadingbooleanNopropsfalseWhether the split pane should display a loading state.
maxSizenumberNoprops90Maximum start pane size as a percentage.
minSizenumberNoprops10Minimum start pane size as a percentage.
onSizeChange((size: number) => void)Noevents—Callback fired when the pane size changes.
orientation"horizontal" | "vertical"Noprops"horizontal"Split orientation.