SectionHeader

A standardized section header for dividing page content into logical groups. Supports a title, description, leading icon, action slot, and an optional bottom border for visual separation.

Import

import { SectionHeader } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<SectionHeader
  title="Students"
  description="Manage enrolled students for this session."
  icon={<Icon name="UserGroupIcon" />}
  action={<Button size="sm">Add Student</Button>}
  bordered
/>

Props

Prop	Type	Default	Description
`title`*	string	-	Section title text.
`description`	string	-	Optional description shown below the title.
`action`	ReactNode	-	Action element such as a button or link, aligned to the right.
`icon`	ReactNode	-	Icon displayed before the title.
`className`	string	-	Additional CSS classes for the wrapper.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant controlling title, description, and icon sizes.
`bordered`	boolean	`false`	Whether to show a bottom border below the header.