Patterns · Settings

Section Header

A settings GROUP header — the hierarchy parent that a stack of setting rows sits under: a noun-phrase label, an optional "?" help, and a right-aligned action slot (a master switch, a count, a link).

Examples

Label

Help

Section header · the settings GROUP header (label + "?" help + action slot)

Variants · plain · with "?" help · with an action (master switch / count / link)

A group in context · a header over its setting rows

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-section-header> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css.
     The "?" help + its icon are summoned from the DS icon library (no inline glyph). -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';               // registers <aha-icon> (the "?" glyph)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-section-header.js';  // registers <aha-section-header>
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-switch.js';          // registers <aha-switch> (a master switch in the action slot)
</script>

<!-- A settings GROUP header — a noun phrase in sentence case. Rows sit under it. -->
<aha-section-header label="Presentation"></aha-section-header>

<!-- with a "?" help (the circled question glyph) after the label -->
<aha-section-header label="Audience" help="Who can see and join this deck."></aha-section-header>

<!-- with an action slot (a master switch / count / link) pushed to the right -->
<aha-section-header label="Interaction" help="Turn the whole group on or off.">
  <aha-switch slot="action" checked></aha-switch>
</aha-section-header>

import '@ahaslides-product/design/icons';               // registers <aha-icon> (the "?" glyph)
import '@ahaslides-product/design/aha-section-header';  // registers <aha-section-header>

// One shared custom element — React 18 renders it directly (no ref needed; it takes no events).
// React 19 can pass the same attributes. `label` is a noun phrase in sentence case; `help` fills
// the "?" tooltip; the `action` slot carries a master switch / count / link pushed to the right.
function SectionHeader({ label, help, action }) {
  return (
    <aha-section-header label={label} {...(help ? { help } : {})}>
      {action ? <span slot="action">{action}</span> : null}
    </aha-section-header>
  );
}

// usage
<SectionHeader label="Audience" help="Who can see and join this deck." />

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/icons';               // registers <aha-icon> (the "?" glyph)
import '@ahaslides-product/design/aha-section-header';  // registers <aha-section-header>
import '@ahaslides-product/design/aha-switch';          // registers <aha-switch> (action slot)
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<template>
  <!-- A settings GROUP header — label is a noun phrase in sentence case; help fills the "?" tooltip. -->
  <aha-section-header label="Audience" help="Who can see and join this deck." />

  <!-- action slot — a master switch / count / link pushed to the right -->
  <aha-section-header label="Interaction" help="Turn the whole group on or off.">
    <aha-switch slot="action" checked />
  </aha-section-header>
</template>

API

Prop	Type	Default	Notes
`label`	string	`—`	The group title — a noun phrase in sentence case; exposed as a role=heading aria-level=3
`help`	string	`—`	Optional guidance — renders the "?" help trigger (circled question glyph) after the label; the tooltip carries the text
`action`	slot	`—`	Right-aligned slot (slot="action") — a master switch, a count, or a link

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-section-header';   // registers <aha-section-header>

Agent feed for this component (absolute, fetchable anywhere): section-header.agent.json · section-header.md · section-header.llms.txt

When to use

Section header — the title of a GROUP of settings — the hierarchy parent over a stack of rows
Setting row — ONE setting inside the group — a label + a control
Settings list — a whole schema-driven surface of groups + rows at once

Name the group with a short noun phrase in sentence case ("Audience", "Interaction") — never a full sentence and never Title Case. Add `help` only when the group needs a word of guidance; keep the label itself terse. Reach for the `action` slot to hang a master switch that toggles the whole group, a count of items, or a "Manage" link — anything that acts on the group, not on one row.

Surfaces

editor dashboard settings audience

Spec

Row flex; align-items center; gap 8 · Label Plus Jakarta 14/21, weight 600, text-default (#1A1A1A) — a role=heading aria-level=3 · Casing noun phrase, sentence case — "Presentation", NOT "Presentation Settings" · Help optional "?" after the label (DS <aha-tooltip help> — the circled question glyph) · Action right-aligned slot (margin-left:auto) — a master switch / count / link · Motion none — static header, no interactive state of its own