Skip to main content

Panes

Header Component​

The Header component is a customizable header for a pane. It provides various props to control its appearance and behavior.

Props​

  • defaultSize (optional): Size of the header when not minimized or maximized. Possible values are 'sm', 'md', 'lg', and 'xl'. Default value is 'md'.
  • viewMode (optional): Is the pane in default view, minimized, or maximized. Possible values are 'default', 'min', and 'max'. Default value is 'default'.
  • shouldShowExpandIcon (optional): Should display the expand icon. Default value is true.
  • taskIcon (optional): Task icon SVG. Can be a ReactNode.
  • taskIconColor (optional): Task icon color. Default value is defined in headerTokens.
  • title (optional): Title of the pane. Default value is 'Dialer'.
  • titleOverride (optional): Override task icon and title with a custom component. Can be a ReactNode.
  • onMinimizeClick (optional): Function to run on minimize click.
  • onExpandClick (optional): Function to run on expand click.
  • onCompressClick (optional): Function to run on compress click.
  • onCloseClick (optional): Function to run on close click.

Example Usage​

<Header
    defaultSize="md"
    viewMode="default"
    shouldShowExpandIcon={true}
    taskIcon={<MyCustomTaskIcon />}
    taskIconColor="#FF0000"
    title="My Pane"
    onMinimizeClick={handleMinimizeClick}
    onExpandClick={handleExpandClick}
    onCompressClick={handleCompressClick}
    onCloseClick={handleCloseClick}
/>