Panel

Updated: Sep 24, 2026

Use Panel as a quiet backdrop for one coherent informational region, such as a block of copy, a summary, or a related set of facts. It builds on Container but is non-focusable, non-pressable, and non-clickable by default. Panel owns a fixed content scale, the panel material, and a medium corner radius so informational surfaces remain visually consistent.

The panel material draws the default container material at reduced opacity. Its opacity increases when an interactive panel receives focus or press, and a soft gradient darkens the bottom edge. A panel can extend to the screen edges. Prefer the large spacing token to inset authored content that is not full bleed.

Recommended examples

import {Panel, TextView, TextStyle, TextColor} from '@wearables-ui-toolkit/mrbd';

function ConnectionSummary() {
  return (
    <Panel>
      <div className="panel-content">
        <TextView textStyle={TextStyle.BODY1}>Connection details</TextView>
        <TextView textStyle={TextStyle.META1} textColor={TextColor.SECONDARY}>
          UPDATED NOW
        </TextView>
      </div>
    </Panel>
  );
}

.panel-content {
  display: grid;
  gap: var(--uit-spacing-med-lg);
  padding: var(--uit-spacing-large);
}

When the entire panel is one action, enable focus, press feedback, and activation together:

import {Panel, TextView, TextStyle} from '@wearables-ui-toolkit/mrbd';

<Panel
  focusable
  pressable
  clickable
  ariaLabel="Open connection details"
  onActivate={openConnectionDetails}
>
  <div className="panel-content">
    <TextView textStyle={TextStyle.BODY1}>Connection details</TextView>
  </div>
</Panel>;

Props

Panel accepts every Container prop except contentScaleForStateFn, which the component owns, and interactive, which it replaces with separate capability switches. It renders a div and forwards its ref to that element. See Container and InteractableBase for the complete inherited API. The props that differ or most directly affect a panel appear below. The complete prop type is PanelProps.

Own props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content displayed in the panel.

Notable inherited props

Prop	Type	Default	Description
`material`	`ContainerMaterial`	the panel material	Replaces the backdrop material.
`shapeProvider`	`ShapeProvider`	rounded rectangle at the `medium` corner radius	Defines the geometry for content clipping and material paths.
`focusable`	`boolean`	`false`	Lets the entire panel receive focus when true.
`pressable`	`boolean`	`false`	Adds press feedback to the entire panel when true.
`clickable`	`boolean`	`false`	Makes the entire panel one action when true.
`width`	`number \\| string`	`'auto'`	CSS width.
`height`	`number \\| string`	`'auto'`	CSS height.
`clipContent`	`boolean`	`true`	Clips the content subtree to the shape.
`disabled`	`boolean`	`false`	Blocks activation and applies disabled opacity. Use it only on an interactive panel. Only an interactive panel sets `aria-disabled`, and only there does a change after mount take effect.
`onActivate`	`(event: InteractableActivationEvent) => void`	—	Handles the action when the panel is clickable.
`onStateChange`	`(prev: InteractionState, next: InteractionState) => void`	—	Reports interaction-state transitions when the panel is interactive.
`ariaLabel`	`string`	—	Accessible name. Required when the panel is clickable.
`visualStateOverride`	`VisualState`	—	Overrides the rendered visual state.
`style`	`CSSProperties`	—	Styles merged over the panel’s own styles.

The interactive prop is not available. Set focusable, pressable, and clickable individually. Any one of these props makes the panel an interactable; leaving all three unset keeps it a plain backdrop.

Behavior

Non-interactive by default. Without capability props, the panel has no tab index, role, aria-disabled, press handling, or activation. It retains the default arrow cursor, and onStateChange does not fire. The panel is a surface, not a control.
Fixed content scale.Panel pins the content scale, so content does not inset and expand across states as it does in Container. Instead, the material owns feedback through per-state opacity: quiet at rest, brighter on focus, and brighter again on press.
Panel material. Each layer of the default container material renders at a reduced opacity that increases by state. A gradient darkens the bottom edge to preserve legibility for content that reaches it. Passing material replaces the entire material, including that gradient.
One target when interactive. An interactive panel treats the entire backdrop as one target. Its children must remain non-interactive so focus and activation have one unambiguous owner. Focus and press behavior then matches Container, including partial-focus handoff and the rubber band at a directional dead end.
Intrinsic sizing. Like Container, the panel is an inline flex box that follows its content unless width or height specifies another size. Prefer responsive layout to fixed panel dimensions.
Inherited behavior. The panel inherits shape and smooth corners, material insets, content clipping, reduced motion, page-entry snapping, fast-focus snapping, and customScaleX / customScaleY / customAlpha unchanged from Container.

Accessibility

A non-interactive panel adds no role or accessible name. The application owns the semantics of its content; use headings and TextView hierarchy to expose that structure to assistive technology.

An interactive panel inherits InteractableBase semantics. A clickable panel gives the div root a button role, a focusable panel gets a tab index, and the component provides aria-disabled and Enter/Space activation. A clickable panel requires an ariaLabel that describes what activation does. If the panel is not a button, the application must provide the appropriate role and matching ARIA state props so its semantics remain accurate.

The capability switches are independent. A panel that is clickable but not focusable exposes a button role without a tab stop, so keyboard users cannot reach it. Whenever the panel represents an action, set focusable, pressable, and clickable together to provide focus, feedback, and activation consistently.

Application responsibilities

Use one panel for each coherent informational region, with semantic layout and a TextView hierarchy inside it.
Prefer var(--uit-spacing-large) to inset authored content.
Keep panel children non-interactive so the panel and its descendants do not compete for focus or activation.
When the whole panel is one action, set focusable, pressable, and clickable together so keyboard focus, press feedback, and activation remain consistent.

Avoid this pattern

Avoid stacking or repeating panels for lists of records, fields, settings, statuses, or actions. Prefer VerticalList with ListItem.
Avoid using a panel as a list row or as a substitute for Container.
Do not nest Container, StaticContainer, Surface, Button, Chip, Tag, or Header in a panel; this composition is unsupported.
Do not combine an interactive panel with interactive children because the panel must remain one focus and activation target.
For a single label or status, prefer ordinary text, a Tag, or a Chip instead of a panel.

Container, StaticContainer, Surface, VerticalList, ListItem, and Materials overview