Section Heading
A content section header with optional description and action buttons. Used above lists, tables, and card grids.
Molecule
Button
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
- Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
- Do not rely on icon-only navigation unless every control has a clear accessible name.
Key Props / API
Props
title, description, actions, border, className
Example Code
import { SectionHeading } from "@hilum/ui"
<SectionHeading title="Job Postings" />Section Heading · Basic
Default
Title only with divider
Job Postings
Section Heading · With action
Single action
Primary CTA on the right
Job Postings
Section Heading · With description
Title + description + actions
Full composition
Team members
Manage who has access to this project.
Section Heading · No border
borderless
Without the bottom divider