Panel

A panel is a folding block displaying compact information and controls.

View source code

Panel

  • children
    ReactNode

    The content of the Panel.

  • className
    string

    className for the element.

  • DO_NOT_USE_isSidePanel
    boolean

    Whether the panel is coming from the side. Please use the component SidePanel instead

    Default: false
  • footer
    ReactNode

    Footer of the Panel

  • footerSummary
    FooterSummaryProps

    Footer summary of the Panel

  • header
    ReactNode

    Header of the Panel

  • onClose
    MouseEventHandler<HTMLButtonElement>

    Handler that is called when the Panel is closed. If not provided, the close button will not be displayed.

  • title
    ReactNode

    The title of the Panel.

PanelSection

  • cancelTranslation
    string

    The translation for the cancel button.

  • children
    ReactNode

    The content of the PanelSection.

  • editSection
    ReactNode

    The content of the PanelSection when in edit mode.

  • onCancel
    MouseEventHandler<HTMLButtonElement>

    Handler that is called when the cancel button is clicked.

  • onSave
    MouseEventHandler<HTMLButtonElement>

    Handler that is called when the form is saved.

  • saveTranslation
    string

    The translation for the save button.

  • disableSave
    boolean

    Whether the save button should be disabled.

    Default: false
  • editButtonLabel
    string

    Translation for the aria-label of the edit IconButton.

  • isCollapsible
    boolean

    Whether the PanelSection can be collapsed.

  • isDefaultCollapsed
    boolean

    Whether the PanelSection is initially collapsed.

    Default: false
  • isEditable
    boolean

    Whether the PanelSection is editable

  • noAnimation
    boolean

    Whether the PanelSimpleSection should have opening and closing animation. Has no effect when prefers-reduced-motion is set

    Default: false false
  • onCollapsed
    () => void

    Handler that is called when the PanelSection is collapsed

  • onEditClick
    MouseEventHandler<HTMLButtonElement>

    Handler that is called when the edit mode is toggled.

  • onError
    (error: Error) => void

    Handler that is called when an error occurs.

  • onExtended
    () => void

    Handler that is called when the PanelSection is collapsed

  • renderError
    (error: Error) => ReactNode

    Function to render an error in the form.

  • title
    ReactNode

    The title of the PanelSection.