Panel

A non-collapsible carded surface with an optional header. Use for content panels (checks, results, comments) where {@link Section }’s disclosure behaviour isn’t wanted. Sits on bg-card with a border and rounded corners.

Source

Import

import { Panel } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

With Actions · Open in Storybook

Headerless · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Right-aligned header content (copy buttons, summaries, links).
bodyClassName	string	—	Classes applied to the body.
children*	ReactNode	—	Panel content.
className	string	—	Classes applied to the panel root.
count	number	—	Optional count pill shown after the title.
footer	ReactNode	—	Optional footer row below the body.
headerClassName	string	—	Classes applied to the header row.
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Optional leading icon.
padded	boolean	true	Pad the body. Defaults to true; pass false for flush row lists.
title	ReactNode	—	Header title. Omit (with no icon/count/actions) to render a headerless card.
tone	enum	default	Semantic left-border accent.