## Setting group
The settings GROUP container — an optional semibold header (with a "?" help and an action slot) over a column of rows — that bakes in the panel spacing scale so gaps come out right automatically.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-setting-group> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings, dashboard.
Props:
- label: string, default —. Optional group header (a 1–3 word noun phrase). When set, renders a semibold header and becomes the group's aria-label
- help: string, default —. Optional guidance shown as the "?" help tooltip (composed DS <aha-tooltip help>) after the header label — never a standing line
- tone: 'default' | 'danger', default default. danger → a danger-zone group, dropped 48px below the previous group (overrides the automatic 32). Spacing only — the danger CTA styling lives on the button
- action: slot, default —. Forwarded to the header, right-aligned — e.g. a small link or button beside the group title
- (default slot): slot, default —. The setting rows / sub-groups; they stack 16px apart automatically
Tokens: text-default, text-tertiary, bg-container.
Use when: Setting group (a titled cluster of related settings in a panel — it bakes in the 16/32/48 spacing scale); Sub setting group (dependent child settings that appear under one parent toggle (indent + tight gap)); Settings list (you want the whole surface rendered from a schema (rows + reused DS controls) in one element).