Component / 048 / NEXOFRAME

SectionHeader

Mẫu chuẩn

Phần đầu của một khối trong trang, gồm eyebrow tuỳ chọn, tiêu đề, số đếm tuỳ chọn, một câu phụ và một hành động dạng chữ. Cấp heading do người gọi chọn, không cố định.

Composite tầng 2Dựng từ Badge + ButtonTối đa 1 hành độngas h2 hoặc h3

Playground

Đổi brand, theme, cấp heading, số đếm và hành động để xem cùng một SectionHeader thích ứng.

TỔNG QUAN

Cần bạn duyệt

Các đề xuất đang chờ quyết định của bạn.

Cấp heading là h2, kiểu chữ không đổi theo as.

import { SectionHeader } from "@nexobox/ui";

<SectionHeader
  as="h2"
  eyebrow="TỔNG QUAN"
  title="Cần bạn duyệt"
  description="Các đề xuất đang chờ quyết định của bạn."
  count={3}
  action={{ label: "Xem tất cả", onAction: goToApprovals }}
/>

Bài toán

Một trang Tổng quan có bốn đến năm khối. Mỗi khối cần tiêu đề, một số cho biết khối có bao nhiêu mục, và một lối tắt tới trang đầy đủ. Ghép tay heading, Badge và Button thì mỗi khối sẽ lệch nhau về cấp heading, khoảng cách và vị trí hành động. PageHeader không dùng thay được, vì nó mang h1 và đứng đầu trang.

Khi nào sử dụng

Nên dùng

Tiêu đề của một khối trong trang, kèm tối đa một hành động. Khối có số đếm đáng biết trước khi đọc: "Cần bạn duyệt · 3".

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Đầu trang	PageHeader
Tiêu đề không có số đếm và không có hành động	Một heading thường. Composite ở đây là thừa
Tiêu đề trong thẻ	Nội dung của Card (trang catalogue còn nợ, W9.8b)

Dựng từ

Primitive tầng 1	Vai trong composite
Badge	Số đếm, `variant="neutral"`.
Button	Hành động, `variant="ghost"`, `size="sm"`.

SectionHeader thêm gì
Cấp heading chọn được (`h2`, `h3`) mà vẫn giữ một kiểu chữ
Bố cục một hàng: tiêu đề và số đếm bên trái, hành động bên phải; hành động xuống dòng dưới small
Eyebrow chữ hoa nhỏ tuỳ chọn

Anatomy

#	Phần	Ghi chú
1	Eyebrow	caption, `text-muted`, chữ hoa. Tuỳ chọn.
2	Tiêu đề + số đếm	Heading theo `as`, số đếm là Badge.
3	Hành động	Button ghost, xuống dòng dưới small.
4	Câu phụ	ui, `text-secondary`. Tuỳ chọn.

States

Tiêu đề không nhận tương tác. Hành động có trạng thái của Button. Khi count bằng 0, Badge vẫn hiện "0".

Bàn phím & trợ năng

Tab tới hành động, Enter / Space kích hoạt -- từ Button.

Heading là mốc điều hướng. Composite không thêm phím nào.

Seam — host sở hữu gì

Composite không điều hướng; nó gọi onAction. Host quyết định hành động đưa tới đâu (một Link bọc bằng asChild là việc của host), và tự tính số đếm. Không fetch, không router, không next.

API & triển khai

Prop	Mặc định	Quy ước
title	—	Bắt buộc.
as	"h2"	"h2" \| "h3". Cấp heading.
eyebrow	—	—
description	—	Một câu.
count	—	Hiện bằng Badge.
action	—	{ label: string; onAction: () => void }. Tối đa một hành động.

Design tokens

--nf-foundation-typography-heading3-* (tiêu đề), --nf-foundation-typography-caption-* (eyebrow), --nf-foundation-typography-ui-* (câu phụ), --nf-semantic-text-primary, --nf-semantic-text-secondary, --nf-semantic-text-muted, --nf-foundation-space-1, --nf-foundation-space-2, --nf-foundation-space-4. Qua Badge và Button: token của hai primitive đó.

Do / Don't

Nên dùng

Một hành động dạng chữ, dẫn tới trang đầy đủ. as="h2" trực tiếp dưới h1 của trang. Số đếm thật, lấy từ dữ liệu.

Tránh dùng

Hai nút hành động chính trong tiêu đề khối. Nhảy từ h1 xuống h3 vì cỡ chữ h3 trông hợp hơn — kiểu chữ không đổi theo as. Số đếm tĩnh viết vào tiêu đề.