Section header

🧭 When to Use a Section Header

Use a Section Header when:

• You’re introducing a distinct section of a page or layout

• That section includes user actions, filters, or view toggles

• You want to reinforce page hierarchy or grouping in dashboards or multi-pane layouts

Avoid using Section Headers for content that doesn’t need context or interaction — use a standard heading or divider instead.

🎨 Types

Section Headers support different layout patterns depending on the tools or interactions required:

• Action Bar – Includes inline buttons (e.g., “Export”, “Edit”, “New”)

• Button Group – Includes a compact group of toggles (e.g., List/Grid, Sort by)

• Blank – No actions; just a title — ideal for content with minimal interaction

These types can be swapped in Figma using component variants, and can be expanded or simplified depending on the screen or breakpoint.

🎯 States

• Empty – Minimal spacing; used when there are no active filters, controls, or additional UI elements

• Filled – Includes dropdowns, tags, filters, or contextual tools beneath the title

State is visual and functional — filled headers often shift spacing, elevation, or divider usage to balance layout density.

🧭 Tab Bar (Optional)

Section Headers can optionally include a Tab Bar, used to toggle between views or modes directly within the section.

• Tab Bar: Yes – Tabs are included below or beside the header

• Tab Bar: No – Header remains simple or action-focused

The tab bar inherits the same tab tokens as your main tab system and supports selected, hover, and disabled states.

🧩 Component Structure

Each Section Header includes:

• A Title (required)

• Optional Subhead or supporting label

• Optional Action Buttons, Filter Dropdowns, or View Toggles

• Optional Tab Bar if the section supports multiple views

These parts are toggleable in Figma using layer properties and auto-layout spacing for adaptability.

♿ Accessibility Considerations

From a design perspective:

• Ensure actions are clearly visible and don’t compete with the section title

• Tab focus should move logically from header → actions → tab bar

• Don’t rely on icon-only headers unless tooltips or subtext are present

From a code perspective (if implemented):

• Use semantic <section> with a <h2> or <h3> heading for the title

• Use proper roles and labels for any buttons, filters, or tabs

• Ensure the tab bar supports role="tablist" and aria-selected if present

✅ Best Practices

• Match the header type to the complexity of the section (e.g., blank for read-only content, action bar for dynamic content)

• Keep action buttons relevant to the section, not global

• Use tabs for modes or views, not filters

• Maintain consistent spacing between Section Header and following content

• Avoid duplicating header content that already exists elsewhere on the page