Section Heading

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:

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

Basic usage — heading is required:

<SectionHeading heading="Project Members" />

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

<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