Panel | Calcite Design System

Panel is a container that can house interactions as well as live within other Calcite components.

Overview

Panel provides a header with heading text and a summary. There are slots to add Actions and Icons to the start and end of the header. Panel's main content area is a blank container.

Panel works well with Shell Panel and Flow. Combine Panels within Flow for an out-of-the-box drill-in experience.

Sample

Usage

Accommodate content that has an associated heading, and if applicable a description and/or Actions
Provide a drilled-in workflow with Flow
Contain a List

Accessibility

Key	Function
`Tab`	Moves focus to the next focusable element. If the currently focused element is the last, focus will leave the component.
`Tab` and `Shift`	Moves focus to the previous focusable element. If the currently focused element is the first, focus will leave the component.

API reference

Properties

Property	Attribute	Description	Type	Default
beforeClose		Passes a function to run before the component closes.	`() => Promise<void>`
closable	closable	When `true`, displays a close button in the component.	`boolean`	`false`
closed	closed	When `true`, the component will be hidden.	`boolean`	`false`
collapsed	collapsed	When `true`, hides the component's content area.	`boolean`	`false`
collapseDirection	collapse-direction	When `collapsible` is `true`, specifies the direction of the collapse icon.	`CollapseDirection`	`"down"`
collapsible	collapsible	When `true`, the component is collapsible.	`boolean`	`false`
description	description	Specifies a description for the component.	`string`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
heading	heading	Specifies the component's heading text.	`string`
headingLevel	heading-level	Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.	`HeadingLevel`
icon	icon	Specifies an icon to display.	`IconName`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
loading	loading	When `true`, a busy indicator is displayed.	`boolean`	`false`
menuFlipPlacements		Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.	`FlipPlacement[]`
menuOpen	menu-open	When `true`, the action menu items in the `header-menu-actions` slot are open.	`boolean`	`false`
menuPlacement	menu-placement	Determines where the action menu will be positioned.	`LogicalPlacement`	`"bottom-end"`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
overlayPositioning	overlay-positioning	Specifies the type of positioning to use for overlaid content, where: `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.	`OverlayPositioning`	`"absolute"`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
topLayerDisabled	top-layer-disabled	When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.	`boolean`	`false`

Slots

Name	Description
default (unnamed)	A slot for adding custom content.
action-bar	A slot for adding a `calcite-action-bar` to the component.
alerts	A slot for adding `calcite-alert`s to the component.
content-bottom	A slot for adding content below the unnamed (default) slot and above the footer slot (if populated).
content-top	A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
header-actions-start	A slot for adding actions or content to the start side of the header.
header-actions-end	A slot for adding actions or content to the end side of the header.
header-content	A slot for adding custom content to the header.
header-menu-actions	A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
heading	A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
description	A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
fab	A slot for adding a `calcite-fab` (floating action button) to perform an action.
footer	A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
footer-end	A slot for adding custom content to a trailing footer. Should not be used with the `"footer"` slot.
footer-start	A slot for adding custom content to a leading footer. Should not be used with the `"footer"` slot.

Styles

Name	Description
--calcite-panel-corner-radius	Specifies the component's corner radius.
--calcite-panel-heading-text-color	Specifies the text color of the component's `heading`.
--calcite-panel-icon-color	Specifies the color of the component's icon.
--calcite-panel-description-text-color	Specifies the text color of the component's `description`.
--calcite-panel-border-color	Specifies the component's border color.
--calcite-panel-background-color	Specifies the component's background color.
--calcite-panel-content-top-space	Specifies the padding of the component's `content-top` slot.
--calcite-panel-content-bottom-space	Specifies the padding of the component's `content-bottom` slot.
--calcite-panel-header-background-color	Specifies the background color of the component's header.
--calcite-panel-header-action-background-color	Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
--calcite-panel-header-action-background-color-hover	Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
--calcite-panel-header-action-background-color-press	Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
--calcite-panel-header-action-text-color	Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
--calcite-panel-header-action-text-color-press	Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
--calcite-panel-footer-background-color	Specifies the background color of the component's footer.
--calcite-panel-space	Specifies the padding of the component's `unnamed (default)` slot.
--calcite-panel-header-content-space	Specifies the padding of the component's `header-content` slot.
--calcite-panel-footer-space	Specifies the padding of the component's footer.
--calcite-popover-border-color	Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
--calcite-panel-content-space	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
--calcite-panel-footer-padding	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
--calcite-panel-header-border-block-end	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.

Events

Name	Description	Behavior
calcitePanelClose	Fires when the close button is clicked.	bubblescomposedcancelable
calcitePanelCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calcitePanelExpand	Fires when the component's content area is expanded.	bubblescomposed
calcitePanelScroll	Fires when the content is scrolled.	bubblescomposed
calcitePanelToggle	Fires when the collapse button is clicked.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
scrollContentTo	Scrolls the component's content to a specified set of coordinates.	`scrollContentTo(options?: ScrollToOptions): Promise<void>`
setFocus	Sets focus on the component's first focusable element.	`setFocus(options?: FocusOptions): Promise<void>`