Panel

A layout wrapper for both interactive tools and plain content that enables progressive disclosure—keeping pages scannable by showing essentials first and revealing details on demand with a clear, anchored header.

Usage

Code

Accessibility

Draft

Find a news article with a striking photo. In 4–6 sentences, tell us what the image really says beyond the caption. Quote a sentence from the article that amplifies the photo.

Edit

Delete

<sl-panel collapsible heading="6.5 Sneaky Photo Signals">
  <sl-badge slot="aside">Draft</sl-badge>
  <p>Find a news article w...</p>

  <ul class="links">
    <li><a href="#"><sl-icon name="far-eye-slash"></sl-icon> 1. Find ...</a></li>
    ...
  </ul>
  
  <sl-button-bar align="end">
    <sl-button fill="ghost"><sl-icon name="far-file-pen"></sl-icon>Edit</sl-button>
    <sl-button fill="ghost"><sl-icon name="far-trash"></sl-icon>Delete</sl-button>
  </sl-button-bar>
</sl-panel>

When to use

Layout Wrappers

Nesting Panels lets you group subtopics and local controls inside a parent section, improving scanability, and enabling progressive disclosure without overwhelming the page. Panels can be collapsible or always-on to act as structural wrappers. Adjust visual weight using the Density, Border/Divider, and Elevation properties to keep hierarchy clear even without collapse.

Progressive Content

Use Panel to progressively reveal either interactive controls (filters, advanced settings, long forms) or dense supporting details (explanations, specs, logs) that don’t need to be always visible. Keep them collapsed by default to reduce scanning effort and distraction, and let users expand on demand. Wrap tools related to a specific area of a page (e.g., “Lesson details” actions) so the header acts as a clear anchor.

When not to use

Static or Critical Content

For simple, short, non-interactive information, use a plain section or Card to avoid unnecessary chrome. And never place error messages or critical information inside a collapsible Panel—keep them visible by default.

Don’t use Panel to switch between sections of an app or page. Panels don’t manage URL state, deep links, or back/forward history, and they’re not optimized for navigating large informations. Use Panels for local content grouping and disclosure only; they can include links, but should not be the mechanism that drives routing.

Anatomy

Item	Name	Description	Optional
1	Panel Header	Top bar that frames the section title and optional affordances. When the panel is collapsible, it hosts the toggle and provides the clickable focus area.	no
2	Heading	The Panel title that names the content and sets hierarchy for scanning and accessibility.	no
3	Toggle	Control that opens/closes the panel when collapsible is enabled.	Yes
4	Prefix	Leading element before the heading, typically an icon, that provides quick context.	Yes
5	Suffix	Trailing element aligned with the heading, commonly a badge, for counts, status, or short labels.	Yes
6	Actions	Inline tools related to this section (e.g., Edit, Add, overflow menu). Keep concise and contextual.	Yes
7	Panel Content	The body area for the panel’s information and controls, visible when expanded and hidden when collapsed.	no

Density

Panels support two densities to tune information density and comfort:

Plain (default): Slightly compact spacing for data-heavy views, dashboards, or when several Panels appear in a column; helps reduce scroll.
Comfortable: Increased padding for readability in content-first screens, forms, or when a Panel contains mixed media (text + controls + images).

Choose density per layout context; mixing densities on the same screen is possible but keep it consistent within a section.

Elevation

Use elevation to signal layering and emphasis relative to the page background.

None (default): Flat surface. Best for inline sections that should blend with the page layout.
Raisen: Use to separate the Panel from busy backgrounds or when grouping controls needs visual priority.
Shuken: Reserve for floating containers, highly prominent tools, or when the Panel must stand out from surrounding elements.

The header frames the Panel’s title and optional affordances. You can add:

Prefix (Icon): a small, descriptive icon that conveys the section’s purpose (e.g., info, settings, warning).
Suffix (Badge): a compact status/count indicator (e.g., “3”, “Beta”, “New”) aligned with the title to convey state at a glance.

Use prefix/suffix sparingly to keep headings short and readable.

Styling

Improves scannability and grouping, reduces visual clutter, and reinforces hierarchy by separating titles/actions from body content.

Border: Draws a border around the Panel to clearly delimit its area from adjacent content.
Divider: Adds a horizontal rule between header and content; only visible when content is expanded.

Figma Options

With these options, you can tweak the appearance of the popover in Figma. They are available in the design Panel so you can compose the popover to exactly fit the user experience need for the use case you are working on.

Panel Props

Item	Options	Description
Elevation	`'None', 'Raised', 'Sunken'`	Visual depth of the panel surface: flat, lifted above, or inset below the page.
Density	`'Plain', 'Comfortable'`	Internal spacing: compact for data-dense views or roomier for readability.
Outline	`'on', 'of'`	Toggles a border around the panel to delimit its area.
Divider	`'on', 'of'`	Shows a separator between header and content (only visible when content is shown).

Panel Header Props

Item	Options	Description
Prefix	`'on', 'of'`	Enables a leading slot before the heading (e.g., an icon).
Prefix Instance	`select`	Choose which prefix component appears in the leading slot.
Sufix	`'on', 'of'`	Enables a trailing slot after the heading (e.g., a badge).
Sufix Instance	`select`	Choose which suffix component appears in the trailing slot.
Actions	`'on', 'of'`	Shows an actions area in the header (buttons/menu) for context-specific tools.

Panel Body Props

Item	Options	Description
Layout	`'Plain', 'full-width', 'Comfortable'`	Controls content padding: standard padding, edge-to-edge content, or increased padding for comfort.

Behaviours

Let's explore the behaviour of the Panel.

Nested structure

Supports nesting a Panel inside another to group subtopics and local tools within a parent section. Each Panel keeps its own header, state, and affordances, improving scanability without overwhelming the page.

Collapsable Toggle

Opens and closes via the header toggle to reveal content on demand. In controlled mode, the component reflects the app’s state (e.g., open=true/false) and “remembers” it across renders and navigation patterns you manage.

All interactive elements in the header, including actions and the toggle, are reachable via Tab and operable with Enter or Space. Users can continue tabbing into the content or onward in the page flow.

Content Divider

The header-content divider only appears when the panel is expanded, using a smooth transition to avoid abrupt layout shifts. This preserves rhythm in dense interfaces while clarifying hierarchy when content is visible.

Draft

Find a news article with a striking photo. In 4–6 sentences, tell us what the image really says beyond the caption. Quote a sentence from the article that amplifies the photo.

Edit

Delete

<sl-panel collapsible heading="6.5 Sneaky Photo Signals">
  <sl-badge slot="aside">Draft</sl-badge>
  <p>Find a news article w...</p>

  <ul class="links">
    <li><a href="#"><sl-icon name="far-eye-slash"></sl-icon> 1. Find ...</a></li>
    ...
  </ul>

  <sl-button-bar align="end">
    <sl-button fill="ghost"><sl-icon name="far-file-pen"></sl-icon>Edit</sl-button>
    <sl-button fill="ghost"><sl-icon name="far-trash"></sl-icon>Delete</sl-button>
  </sl-button-bar>
</sl-panel>

API

The Panel component offers settings for various scenarios.

Properties

Name	Attribute	Type	Default	Description
`collapsed`	`collapsed`	`boolean \| undefined`		Indicates whether the panel is collapsed or expanded .
`collapsible`	`collapsible`	`boolean \| undefined`		Indicates whether the panel can be collapsed.
`density`	`density`	`'plain' \| 'comfortable' \| undefined`	`plain`	The density of the panel.
`divider`	`divider`	`boolean \| undefined`		Will render a horizontal divider between the header and content when set.
`elevation`	`elevation`	`'none' \| 'raised' \| 'sunken' \| undefined`		The elevation style of the panel.
`fill`	`fill`	`'solid' \| 'outline' \| 'link' \| 'ghost'`	`'ghost'`	The fill of the buttons in the tool-bar.
`heading`	`heading`	`string \| undefined`		The text shown in the header. Use this property if your heading is a string. If you need more flexibility, such as an icon or other elements, use the `heading` slot.
`noBorder`	`no-border`	`boolean \| undefined`		Hide the border around the panel when true.
`togglePlacement`	`toggle-placement`	`'start' \| 'end' \| undefined`	`start`	The placement of the toggle button when it's collapsible.

Methods

Name	Parameters	Return	Description
`toggle`	`force: boolean`	`void`	Toggle's the collapsed state of the panel. This only does something if the panel is collapsible.

Events

Name	Event type	Description
`sl-toggle`	`SlToggleEvent<boolean>`	Emits when the panel expands/collapses.

Slots

Name	Description
`heading`	The panel's heading. Use this if the `heading` property does not suffice.
`aside`	Additional content to show in the header; replaces the button bar.
`actions`	The panel's actions; will slot in a tool bar by default.
`default`	The panel's content.
`prefix`	Content to show before the heading.
`suffix`	Content to show after the heading.

CSS Properties

Name	Description
`--sl-panel-content-padding`	The padding for the panel content, e.g. set to 0 to have content without any padding.

CSS Parts

Name	Description
`header`	The header of the panel.
`wrapper`	The wrapper around the heading.
`body`	The body of the panel.
`inner`	The inner container of the panel.
`content`	The content container of the panel.
`titles`	The container for the heading.

Keyboard interactions

Here's an overview of the common keyboard interactions associated with a panel:

Command	Description
`Tab`	Since the panel is basically a wrapper, the tab button functions normally; it focuses on each interactive element it comes across. When entering a collapsible panel the collape toggle button is the first thing that receives the focus.
`Enter` or `Space`	On the toggle button, this will change the state of the panel, either open or close it.

Accessibility considerations

Sometimes, when e.g. we open or close panel items externally, we need to announce to the user that something has changed (the panel has expanded or collapsed). When we expand it externally, it is not automatically read by the screen reader by default. We need to use aria-live to announce this to the user.

We recommend using the Announcer utility (announce function) to inform users about the changes.

Here you can find an example of how to use the Announcer utility with the panel component.

WAI-ARIA

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningful value, because it relies on the context or way a component is used.

For this component we can't think of any common scenarios that require you to add specific attributes, but keep in mind that if you use images or icons that (partially) replace text you need to provide an alternative for assistive technology, by adding an alttext or aria-label as you normally would.

Interactive example