Section

API reference and demos for Section.

Source

Import

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

Demos

Default · Open in Storybook

Nested · Open in Storybook

Danger Tone · 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
bodyClassName	string	—	Classes applied to the content body.
children*	ReactNode	—	Collapsible content.
className	string	—	Classes applied to the section root.
collapsible	boolean	true	Whether the section can collapse. Defaults to true. When false the body is always rendered, the header has no chevron and is not clickable — use for a fixed panel that should never hide its content.
defaultOpen	boolean	false	Initial open state for uncontrolled usage.
headerClassName	string	—	Classes applied to the clickable header.
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Optional leading icon.
onToggle	(…) => void	—	Called when the section is toggled.
open	boolean	—	Controlled open state.
summary	ReactNode	—	Optional right-aligned header summary. The summary is a sibling of the collapse toggle, never a descendant of it — so a summary containing interactive content (filter tabs, links) is valid DOM and its clicks do not toggle the section. When a summary is present, only the chevron + the title toggle; the summary region does not.
title*	ReactNode	—	Header title.
tone	enum	default	Semantic border accent.