Panel

Components

Panel

Code

Panel is a persistent side rail used to display supplemental content alongside the main interface.

Panel presents supplemental content or actions in a side rail that sits alongside the main interface and pushes it aside, rather than overlaying it like a Drawer. Below the mobile breakpoint it switches to a bottom-sheet overlay.

Panel is composed from Panel.Header, Panel.Content, Panel.Footer, and Panel.CloseButton, and its open/closed state is coordinated through PanelProvider — read it anywhere beneath the provider with usePanelContext.

import { Panel,PanelProvider } from '@sproutsocial/racine'

() => {
  const Toggle = () => {
    const { togglePanel } = usePanelContext()
    return (
      <Button appearance='primary' onClick={togglePanel}>
        Toggle panel
      </Button>
    )
  }

  return (
    <PanelProvider defaultOpen>
      <Box display='flex' height='400px' width='100%' bg='neutral.0' borderRadius={300} overflow='hidden' boxShadow='low'>
        <Box flex='1 1 auto' p={400} overflow='auto'>
          <Text.Headline as='h2'>Main content</Text.Headline>
          <Text.BodyCopy as='p' mt={300}>
            The panel renders inline at desktop widths and pushes this content aside.
          </Text.BodyCopy>
          <Box mt={400}>
            <Toggle />
          </Box>
        </Box>

        <Panel
          title='Panel title'
          titleId='panel-title'
          aria-labelledby='panel-title'
          closeButtonLabel='Close panel'
        >
          <Panel.Content>
            <Text.BodyCopy as='p'>
              Supplemental content lives here, alongside the main interface.
            </Text.BodyCopy>
          </Panel.Content>
        </Panel>
      </Box>
    </PanelProvider>
  )
}

Use the direction prop to anchor the panel to the left instead of the default right, and width to override its default size.

Properties