---
title: Panel
description: Group related content inside one bounded surface.
---

A panel block makes a set of content read as one item. Use it for an order summary, a group
of settings, or another part of a page that needs a visual boundary.

The panel holds content in the order that you provide it. Its title, description,
badge, and footnote are optional. The renderer controls their position and visual
style.

## API

```ts
panel(content: Producer[]): PanelBuilder
```

| Method           | Input                                      | Result                                     |
| ---------------- | ------------------------------------------ | ------------------------------------------ |
| `setTitle`       | `string`, `{ icon?: string }`              | Adds a title and an optional icon.         |
| `setDescription` | `string`, `{ icon?: string }`              | Adds supporting text and an optional icon. |
| `setBadge`       | `string`, `{ tone?: Tone, icon?: string }` | Adds a short status label.                 |
| `setFootnote`    | `string`, `{ icon?: string }`              | Adds text after the panel content.         |
| `setFilters`     | `StateBinding<FilterBar>`                  | Places a filter bar in the panel header.   |

Properties that you do not set are not included in the protocol output.

## Basic panel

Pass the panel content as an array. The panel can hold any block or zone.

<BacklitExample path="panel/basic" view="detail" />

## Title

Add a title when the panel content needs a name.

<BacklitExample path="panel/title" view="detail" />

### Title icon

Pass an icon token with the title. The renderer resolves the token through its icon
registry.

<BacklitExample path="panel/title_icon" view="detail" />

## Description

Add a description for supporting information about the complete panel.

<BacklitExample path="panel/description" view="detail" />

### Description icon

Pass an icon token when the description needs a visual marker.

<BacklitExample path="panel/description_icon" view="detail" />

## Badge

Add a badge for a short qualifier or status. If you do not set a tone, the renderer
uses its default badge style.

<BacklitExample path="panel/badge" view="detail" />

### Badge tones

A badge tone gives semantic meaning to its status. The renderer controls the color for
each tone.

#### Neutral

Use `neutral` for a status that does not need emphasis.

<BacklitExample path="panel/badge_neutral" view="detail" />

#### Info

Use `info` for a current state that does not report success, risk, or failure.

<BacklitExample path="panel/badge_info" view="detail" />

#### Success

Use `success` for a completed or intended state.

<BacklitExample path="panel/badge_success" view="detail" />

#### Warning

Use `warning` for a state that needs attention.

<BacklitExample path="panel/badge_warning" view="detail" />

#### Danger

Use `danger` for a failed or destructive state.

<BacklitExample path="panel/badge_danger" view="detail" />

### Badge icon

A badge can include an icon token and a tone.

<BacklitExample path="panel/badge_icon" view="detail" />

## Footnote

Add a footnote for information that applies after the complete panel content.

<BacklitExample path="panel/footnote" view="detail" />

### Footnote icon

Pass an icon token when the footnote needs a visual marker.

<BacklitExample path="panel/footnote_icon" view="detail" />

## Filters

Pass the filter binding from the current view or zone. The protocol output includes the
current resource and view address with the filter declarations.

<BacklitExample path="panel/filters" view="detail" />

## All options

You can set all panel metadata, filters, and content on the same panel.

<BacklitExample path="panel/all_options" view="detail" />

## Actions and conditions

`setActions([visitTo(...), submitTo(...)])` replaces the header controls.
Each control requires text or an icon. These blocks have no row, so supply
fixed argument values. See [Targets](/reference/targets).
`revealWhen(condition)` controls the block inside a form. It has no enable
condition. See [Form conditions](/reference/forms/conditions).