Section Heading

Section title with optional description and actions

Overview

Section Heading introduces a section of a page or panel with a title, an optional supporting description, and optional actions aligned to the right. Use it above lists, tables, cards, and settings groups to give each section a consistent header with room for controls like a “Clear Filters” link or an “Add” button.

The title renders as an h3. When right content is provided, the heading switches to a spread layout with the title/description on the left and the actions on the right.

Usage

Import the component:

tsx

import { SectionHeading } from "@eqtylab/equality";

Basic usage — heading is required:

tsx

<SectionHeading heading="Project Members" />

Add actions with renderRightContent, a function that returns the nodes to place on the right:

tsx

<SectionHeading
  heading="Project Members"
  description="Manage member access and roles for this project"
  renderRightContent={() => (
    <Button>
      <UserPlus />
      Add Member
    </Button>
  )}
/>

Variants

Default

With Description

With Right Content

With Description and Right Content

Props

Name	Description	Type	Default	Required
`heading`	The section title, rendered as an `h3`.	`string`	—	✅
`description`	Optional supporting text shown beneath the title.	`string`	—	❌
`renderRightContent`	Function returning nodes (e.g. buttons) placed on the right of the heading.	`() => ReactNode`	—	❌
`className`	Additional CSS classes applied to the container.	`string`	—	❌

You are reading the v4.2 docs.