## Add Item Button
The full-width "+ Add" affordance that sits under a settings list (OptionRow / QuestionList) — a dashed, tertiary add row that appends a new item.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-add-item-button> 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 Add. The add-affordance text; carries the accessible name
- disabled: boolean, default false. Non-interactive (e.g. at the max item count); muted, no hover, sets aria-disabled
- add: CustomEvent<{}>, default —. Composed event fired on click when enabled — the host appends a new item
Tokens: border, border-disabled, color-primary, bg-container, bg-accent, text-secondary, text-disabled, focus-ring-soft.
Use when: Add Item Button (append a new row to an editable settings list — options, questions, list items); Button (tertiary) (a standalone action that isn't 'add another row to this list').