Section Header

Title + supporting text row for page sections. Supports tab group, search, and action buttons in the trailing slot.

import{ SectionHeader } from "@pepulux/ui"

Default with buttons

Team members

Manage your team's access and roles.


With search

Invoices

View and export billing history.

⌘K

Props

PropTypeDefaultDescription
title*string—Section heading text
supportingTextstring—Supporting sub-text below the title
actions"buttons" | "search" | "button-group""buttons"Type of trailing action slot
primaryActionSectionHeaderAction—{ label, onClick } primary button
secondaryActionSectionHeaderAction—{ label, onClick } secondary button
onSearch(q: string) => void—Search handler (used when actions=search)
dividerbooleanfalseAdds a bottom border
Application component → Section headerswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Label a block of content

Section headers pair a title and supporting text with the section's actions, search or tabs. Use them inside pages; use a page header for the page title.