Panel

Toggle content visibility using Panel.

installyarn add @clayui/panel
versionNPM Version
useimport Panel from '@clayui/panel';

Table of Contents

The Panel is a replacement for the old ClayCollapse in version 2.x, has the same effect but written in React using composition, try it. We recommend that you review the use cases in the Storybook.

Basic Usage

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Panel from '@clayui/panel';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Panel
					collapsable
					displayTitle="Title"
					displayType="secondary"
					showCollapseIcon={true}
				>
					<Panel.Body>{'Body!'}</Panel.Body>
				</Panel>
			</div>
		</Provider>
	);
}

Usage with a custom Title

ClayPanel.Title allows you to add custom content to the title of the panel as seen in this example using ClayLabels.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Panel from '@clayui/panel';
import Label from '@clayui/label';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Panel
					collapsable
					displayTitle={
						<Panel.Title>
							<h3>{'Title'}</h3>
							<span>{'If field '}</span>
							<Label displayType="success">{'Country'}</Label>
							<Label>{'Is Equal To'}</Label>
							<span>{'value '}</span>
							<Label displayType="info">{'Brazil'}</Label>
							<span>{'enable '}</span>
							<Label displayType="success">{'State'}</Label>
						</Panel.Title>
					}
					displayType="secondary"
					showCollapseIcon={true}
				>
					<Panel.Body>{'Body!'}</Panel.Body>
				</Panel>
			</div>
		</Provider>
	);
}

API Reference

Panel

typeof Panel
Parameters

collapsable

boolean | undefined

Flag to indicate that Panel is collapsable.

collapseClassNames

string | undefined

Adds classes to the collapse element. Only when collapsable is true.

collapseHeaderClassNames

string | undefined

Adds classes to the collapse header element. Only when collapsable is true.

defaultExpanded

boolean | undefined

Flag to indicate the initial value of expanded (uncontrolled).

displayTitle

React.ReactNode

Content to display in Panel Title.

displayType

"block" | "default" | "secondary" | "unstyled" | undefined

Flag to indicate the visual variation of the Panel.

expanded

boolean | undefined

Determines if menu is expanded or not (controlled).

onExpandedChange

InternalDispatch<boolean> | undefined

Callback for when dropdown changes its active state (controlled).

showCollapseIcon

boolean | undefined

Flag to toggle collapse icon visibility when collapsable is true.

size

"sm" | "lg" | undefined

Flag to indicate the visual variation of the Panel.

spritemap

string | undefined

Path to spritemap for clay icons

Returns
Element

Body

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
Element

Group

({ children, className, fluid, fluidFirst, fluidLast, flush, small, ...otherProps }: IProps) => JSX.Element
Parameters

fluidFirst

boolean | undefined

Flag to signify that panel-group-fluid-first class should be added. This class generally should be used inside card or sheet

fluidLast

boolean | undefined

Flag to signify that panel-group-fluid-last class should be added. This class generally should be used inside card or sheet

fluid

boolean | undefined

Flag to signify that panel-group-fluid class should be added. This class generally should be used inside card or sheet

flush

boolean | undefined

Flag to signify that panel-group-flush class should be added. This class generally should be used inside card, sheet, or a type of padded container.

small

boolean | undefined

Flag to enable the small variation for panels within a group of panels.

Returns
Element
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
Element
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
Element

Title

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Diego Nascimento, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents