Skip to content

Panel

Props

API reference for Panel. For usage examples, see the React tab.

Panel.Root

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Content

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Footer

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Header

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Inset

NameTypeDefault
aboutstring
accessKeystring
asPanelInsetElement"main"

The element rendered by PanelInset. Use the default main for an application shell, or section/div when composing a contained panel inside an existing page landmark.

autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Provider

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
defaultOpenbooleantrue

Initial open state when uncontrolled.

Note: On mobile viewports the panel renders as an overlay drawer, so defaultOpen={true} will show the drawer immediately on load. Consider using controlled open state with a responsive check if this is not desired.

disableKeyboardShortcutbooleanfalse

Disable the keyboard shortcut for toggling the panel.

exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
keyboardShortcutstringb

Keyboard shortcut key (used with Cmd/Ctrl modifier).

layoutPanelLayoutviewport

Layout mode of the panel. Use viewport for application shells and contained for bounded regions.

openboolean

Controlled open state. When provided, component becomes controlled.

partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
sidePanelSideleft

Which side to position the panel.

titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Separator

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

Panel.Trigger

NameTypeDefault
childrenChildrenOrFunction<ButtonRenderProps>

The children of the component. A function may be provided to alter the children based on component state.

isDisabledboolean

Whether the button is disabled.

isPendingboolean

Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.