Back to Panel
Panel

Metadata

A metadata row combining text and a badge.

main branch
2 minutes ago
Success

Deploy #4821

Build completed in 46s with 0 warnings.

API

PropTypeDefaultDescription
title / descriptionReact.ReactNodeHeader title and supporting text.
leftIcon / rightIconsPanelIconAction / PanelIconAction[]Header icon buttons with optional tooltips.
leftContent / rightContentReact.ReactNodeFree-form header slots.
leftDetails / rightDetailsPanelDetail[]Badge, icon, and text metadata.
footerReact.ReactNodeFooter action row.
variant"default" | "elevated" | "borderless"defaultBorder/shadow treatment.
collapsiblebooleanfalseMakes the header a toggle and animates the content.
open / defaultOpenbooleantrueControlled / uncontrolled open state.
onOpenChange(open: boolean) => voidFires when the panel is toggled.
noPaddingbooleanfalseRemoves default body padding.
disabledbooleanfalseDisables header interactions.
View full API on Panel

More Panel examples