Usage

Subcomponents

  • Panel.Header
    • Panel.Title
    • Panel.HeaderActions
      • Panel.HeaderAction
  • Panel.Body
    • Panel.Section
      • Panel.Section
  • Panel.Footer
    • Panel.FooterNotation
    • Panel.FooterActions

Panel.Header

NameTypeRequiredDefaultDescription
onClickBack
Function
false

Controls visibility and behavior for the "chevron-left" icon on the left side of the title.

since

10.19.0

onClose
Function
false
since

10.19.0

Only 2 actions are shown, the rest are grouped in an overflow menu and only labels are shown.

Panel.HeaderAction

NameTypeRequiredDefaultDescription
block
boolean
false

Sets the button to be 100% of the width of its parent

since

10.19.0

icon
ReactNode
false

string icons have been deprecated, please pass a component from @procore/core-icons The icon to display on the left side of the label

since

10.19.0

iconRight
ReactNode
false

The icon to display on the right side of the label

since

10.19.0

loading
boolean
false

Shows the button spinner

since

10.19.0

sizefalse

The size of the button

since

10.19.0

title
string
true

Tooltip/Overflow menu label text.

since

10.19.0

variantfalse

The variant of the button

since

10.27.2

Panel.HeaderAction is essentially a Button and a Tooltip. Its props are spread to the Button. It should always have some icon, e.g. Panel.HeaderAction icon={<Example />}.

Panel.Body

NameTypeRequiredDefaultDescription
secondaryBgColor
boolean
false

Applies the gray secondary background color.

since

10.19.0

Panel.Section

NameTypeRequiredDefaultDescription
actions
ReactNode | ((section: { open: boolean }) => ReactNode)
false
description

Actions of Buttons and Dropdowns to render. If a function, the open state is provided as open key

since

10.19.0

assets
ReactNode
false
description

Title assets

since

10.19.0

children
ReactNode
false
className
string
false

Additional classNames

expandId
string | number
false
description

Enable the expand and collapse accordion feature. Requires a unique ID across sections, unique within the provider (DetailPage.Card) and requires a heading on the section. Closed sections will not render its children.

since

10.19.0

heading
string
false
description

Heading text for the section

since

10.19.0

initialIsOpen
boolean
false
description

If expandable, start open or closed

since

10.19.0

pills
ReactNode
false
description

Title pills

since

10.19.0

style
CSSProperties
false

Additional CSS styles

subtext
ReactNode
false
description

Title subtext

since

10.19.0

Example