Component Vocabulary (tabs, Buttons, Modals, Drawers)

The components you'll specify most often:

BUTTON. A clickable element that triggers an action. Variants: primary (the main action), secondary (the alternative), tertiary/ghost (less prominent), destructive (delete, cancel).

LINK. A clickable element that navigates somewhere. Use links for navigation, buttons for actions.

INPUT / TEXT FIELD. A box for typing text. Variants: single-line, multi-line (textarea), password (masked), search.

SELECT / DROPDOWN. A field where the user picks from a list. Variants: single-select, multi-select, searchable.

CHECKBOX. On/off for a single option.

RADIO GROUP. Pick one of several options (only one can be selected).

TOGGLE / SWITCH. Like a checkbox but visually a slider. Use for on/off settings.

TABS. Switch between sections of content within the same page. The content of one tab is hidden when another is shown.

ACCORDION. Like tabs, but stacked vertically. Each section can expand or collapse.

MODAL / DIALOG. A box that pops up over the current page, blocking interaction with the rest of the page until dismissed. Use for confirmations, focused forms, important messages.

DRAWER. Like a modal but slides in from the side. Use for forms or detail views that don't need to block the entire page.

TOAST / NOTIFICATION. A small message that appears briefly and goes away. Use for "saved successfully" or "error sending email" kinds of feedback.

TABLE. Rows and columns of data. Specify whether it's sortable, paginated, filterable, and what happens when a row is clicked.

CARD. A container box, usually with a title, some content, and maybe a footer.

BADGE / TAG. A small colored label, often used for status (e.g., the "paid" or "shipped" label on an order).

When specifying components, name the kind of component, then describe its behavior:

"A confirmation modal with title 'Delete this customer?', body 'This action cannot be undone. The customer's order history will be preserved.', a secondary 'Cancel' button on the left, and a destructive 'Delete' button on the right. Clicking outside the modal does NOT dismiss it. Pressing Escape does dismiss it."

The agent gets this. It builds it. You get a modal that does what you described.