Back to Panel
View full API on Panel
Panel
Actions
Header and footer action buttons.
API keys
Manage keys used to authenticate API requests.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | React.ReactNode | — | Header title and supporting text. |
| leadingAction / actions | PanelIconAction / PanelIconAction[] | — | Header icon buttons with optional tooltips. |
| leadingContent / trailingContent | React.ReactNode | — | Free-form header slots. |
| leadingMetadata / trailingMetadata | PanelMetadata[] | — | Badge, icon, and text metadata. |
| leftIcon / rightIcons / leftContent / rightContent / leftDetails / rightDetails | deprecated aliases | — | Backward-compatible aliases for the semantic header props. |
| footer | React.ReactNode | — | Footer action row. |
| variant | "default" | "elevated" | "borderless" | default | Border/shadow treatment. |
| collapsible | boolean | false | Makes the header a toggle and animates the content. |
| open / defaultOpen | boolean | true | Controlled / uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Fires when the panel is toggled. |
| noPadding | boolean | false | Removes default body padding. |
| disabled | boolean | false | Disables header interactions. |