# Add Item Button
> Generated from add-item-button.contract.json — do not edit by hand.

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.

Surfaces: editor, settings, dashboard.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | string | `Add` | The add-affordance text; carries the accessible name |
| `disabled` | boolean | `false` | Non-interactive (e.g. at the max item count); muted, no hover, sets aria-disabled |
| `add` | CustomEvent<{}> | `—` | Composed event fired on click when enabled — the host appends a new item |

## Visual standard (measured)
- Box: full width (100%) · height 40 · radius 8 · padding 0 12
- Border: 1px dashed #E3E3E3 (rest)
- Content: centered — system-plus 16px + label, 8px gap
- Text: Plus Jakarta 14/600, #4A4A4A (secondary)
- Hover: border + text → #6A1EBB, #F9F5FF fill (animated)
- Focus: #6A1EBB border + 2px soft ring
- Disabled: #B5B5B5 text, #EBEBEB border, not-allowed, no hover, aria-disabled

## When to use
- **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'

Place it directly under the list it grows, full-width so it reads as part of the stack. Label it with the item noun — 'Add option', 'Add question' — not a bare 'Add' when the context needs it. Disable (don't hide) it at the max count so the ceiling stays discoverable; pair with a tooltip or helper line explaining the limit.