The Interactive Component Cheat Sheet: What to Call That Clickable Thing

Last time, we covered layout vocabulary — the structural bones of a web page. Headers, sidebars, footers, modals. The stuff that holds everything together.

This time: the things you actually click.

Here's the scenario. You're building a settings page and you tell your AI:

Me: "Add one of those slidey on-off things for dark mode."

Claude: adds a checkbox.

Not wrong, technically. But not what you wanted. You wanted a toggle switch — that little pill-shaped control that slides left and right. The kind you see in every phone settings screen. But since you described it like you were explaining electricity to a golden retriever, the AI took its best guess.

This post is the fix. Every interactive component you've used a thousand times but never had a name for — named, diagrammed, and paired with the exact prompt that makes AI build it correctly.

🔘 Button

  ┌─────────────┐   ┌─────────────┐   ┌─────────────┐
  │   Primary    │   │  Secondary  │   │    Ghost     │
  │  (filled)    │   │ (outlined)  │   │ (text only)  │
  └─────────────┘   └─────────────┘   └─────────────┘
       solid bg         border only        no border
       white text       colored text       colored text
 
  ┌────┐
  │ 🗑 │  ← Icon button (no label, just an icon)
  └────┘

The most basic interactive element. But buttons come in variants, and naming the right variant saves a full round of back-and-forth.

• Primary: The main action. Solid background, high contrast. "Submit," "Save," "Buy Now."
• Secondary: The alternative. Outlined or muted. "Cancel," "Go Back."
• Ghost: Text-only, no background or border. Used for low-emphasis actions.
• Icon button: Just an icon, no label. Trash can, pencil, three dots.

How to prompt AI:

"Add a primary button labeled 'Save Changes' and a ghost button labeled 'Cancel' next to it."

Common mistake: Saying "add a button" without specifying variant. You'll get whatever the AI's default is — usually a primary. If you wanted a subtle text link that acts as a button, you need to say so.

⚙️ Toggle / Switch

  OFF                          ON
  ┌──────────────┐            ┌──────────────┐
  │ ●○○○○○○○○○○○ │            │ ○○○○○○○○○○○● │
  └──────────────┘            └──────────────┘
   grey background              blue background
   circle on left               circle on right
 
  Dark Mode        [ ●━━━━━━━ ]  OFF
  Dark Mode        [ ━━━━━━━● ]  ON

A toggle (or switch) is a binary control — on or off, enabled or disabled. It looks like a little pill with a circle that slides between two positions. Toggles apply their change immediately. You flip it, the thing happens. No "Save" button needed.

This is different from a checkbox (which we'll get to). A toggle is for settings that take effect instantly. A checkbox is for selections you submit later.

How to prompt AI:

"Add a toggle switch for 'Dark Mode' that applies immediately when switched. Default state: off."

Key detail: If you just say "add an on/off control," you might get a checkbox, a toggle, a radio button pair, or a dropdown with Yes/No. Specify "toggle switch" and the ambiguity disappears.

📑 Tabs

  ┌─────────┬─────────┬─────────┐
  │ General │  Billing │ Security│
  ├─────────┘         └─────────┘──────────────┐
  │                                             │
  │  Name: Jay                                  │
  │  Email: [email protected]                   │
  │  Language: English                          │
  │                                             │
  └─────────────────────────────────────────────┘
     ▲ active tab: underlined or highlighted
     other tabs: clickable but muted

Tabs let users switch between different views within the same page without navigating away. Click "Billing," the content area swaps to billing info. The URL doesn't change. The page doesn't reload.

How to prompt AI:

"Create a tabbed interface with three tabs: General, Billing, and Security. Show the General tab content by default."

Don't confuse: Tabs switch content in place. A navbar navigates to different pages. If each tab should have its own URL, you probably want a navbar or segmented navigation, not tabs.

📂 Accordion / Collapsible

  ┌─────────────────────────────────────────┐
  │  ▶ What is your refund policy?          │   ← collapsed
  ├─────────────────────────────────────────┤
  │  ▼ How do I cancel my subscription?     │   ← expanded
  │                                         │
  │  Go to Settings → Billing → Cancel.     │
  │  Your access continues until the end    │
  │  of the current billing period.         │
  │                                         │
  ├─────────────────────────────────────────┤
  │  ▶ Do you offer student discounts?      │   ← collapsed
  └─────────────────────────────────────────┘

A list of items where clicking a header expands or collapses the content below it. The ▶ arrow rotates to ▼ when open. FAQ pages, documentation sidebars, and settings panels use these constantly.

How to prompt AI:

"Build an FAQ section using an accordion. Only one item should be expandable at a time — clicking a new one collapses the previous."

Key detail: "Only one open at a time" vs. "multiple can be open simultaneously" is a real design decision. Specify it, or the AI picks one for you.

🎠 Carousel / Slider

  ┌─────────────────────────────────────────────┐
  │                                             │
  │  ◀  │  ┌──────────────────────────┐  │  ▶  │
  │     │  │                          │  │     │
  │     │  │     Slide 2 of 4         │  │     │
  │     │  │                          │  │     │
  │     │  └──────────────────────────┘  │     │
  │                                             │
  │              ○  ●  ○  ○                     │
  │           dot indicators                    │
  └─────────────────────────────────────────────┘
     ◀ ▶  navigation arrows

A horizontal scrolling container that shows one (or a few) items at a time, with arrows or swipe gestures to move between them. Product image galleries, testimonial sections, and featured content blocks are common use cases.

How to prompt AI:

"Add an image carousel that shows one image at a time with left/right arrows and dot indicators below. Enable swipe on mobile."

Variation: An auto-playing carousel rotates slides on a timer. Specify "auto-play with a 5-second interval" if you want that. Otherwise, say "manual navigation only." Auto-play carousels are controversial in UX — they annoy some users. But they exist everywhere, so you should know how to ask for one.

💬 Tooltip

                    ┌─────────────────────────┐
                    │ Your unique identifier   │
                    │ used for API requests.   │
                    └────────────┬────────────┘
                                 │
                                 ▼
        API Key:  sk-1234...   [ℹ]
                                 ▲
                          hover or tap this icon
                          to see the tooltip

A small floating text box that appears when you hover over (desktop) or tap (mobile) an element. Tooltips provide extra context without cluttering the UI. They're not modals — they don't block anything. They appear on hover and disappear when you move away.

How to prompt AI:

"Add an info icon next to the API Key label. On hover, show a tooltip that says 'Your unique identifier used for API requests.'"

Don't confuse: A tooltip is hover-triggered and informational. A popover is click-triggered and can contain interactive elements (buttons, links, forms). If you need clickable content inside the floating box, ask for a popover, not a tooltip.

☑️ Checkbox and Radio Button

  CHECKBOX (pick multiple)         RADIO (pick one)
 
  ☑ Email notifications            ○ Light mode
  ☐ SMS notifications              ● Dark mode
  ☑ Push notifications             ○ System default
 
  ▲ squares, multi-select           ▲ circles, single-select

Both let users make selections, but the rules are different:

• Checkbox: Square. Pick zero, one, or many. Each box is independent.
• Radio button: Circle. Pick exactly one from a group. Selecting one deselects the others.

How to prompt AI:

"Add a group of radio buttons for theme selection: Light, Dark, and System Default. Default to System Default."

"Add checkboxes for notification preferences: Email, SMS, and Push. Email and Push checked by default."

The classic mistake: Telling AI "add options for X" without specifying checkbox or radio. If the AI doesn't know whether multi-select is allowed, it guesses. Sometimes it guesses wrong. One word — "checkbox" or "radio" — eliminates the ambiguity entirely.

📋 Dropdown / Select

  ┌──────────────────────────┐
  │  Select country        ▾ │
  └──────────────────────────┘
              │
              ▼
  ┌──────────────────────────┐
  │  🇺🇸 United States        │
  │  🇰🇷 South Korea          │  ← option list
  │  🇯🇵 Japan                │
  │  🇬🇧 United Kingdom       │
  └──────────────────────────┘

We covered dropdowns in the layout post as navigation menus. But dropdowns also exist as form controls — the <select> element. A closed box showing the current selection, which expands into a list of options when clicked.

How to prompt AI:

"Add a dropdown select for country with a placeholder text 'Select country' and options for US, Korea, Japan, and UK."

Variation: A combobox is a dropdown + text input combined. You can type to filter the options. "Add a searchable dropdown" or "add a combobox" — both work.

🔍 Search Bar

  ┌──────────────────────────────────────┐
  │  🔍  Search posts...            [✕]  │
  └──────────────────────────────────────┘
                    │
                    ▼  (as you type)
  ┌──────────────────────────────────────┐
  │  📄 How I Fixed AI Over-correction   │
  │  📄 The Layout Vocabulary Cheat...   │  ← autocomplete
  │  📄 SEO Complete Guide               │     suggestions
  └──────────────────────────────────────┘

An input field specifically designed for search. Usually has a magnifying glass icon, a placeholder like "Search...", and sometimes a clear (✕) button. Advanced search bars show autocomplete suggestions as you type.

How to prompt AI:

"Add a search bar with a magnifying glass icon, placeholder text 'Search posts...', a clear button, and autocomplete suggestions that filter results as the user types."

🗺️ Breadcrumbs

  Home  >  Blog  >  Vibe Coding  >  Interactive Components
  ────     ────     ───────────     ─────────────────────
  link     link        link          current page (no link)

A horizontal trail showing where you are in the site hierarchy. Each segment is a clickable link except the last one (current page). Breadcrumbs help users understand their location and navigate back up without hitting the browser's back button.

How to prompt AI:

"Add breadcrumb navigation showing: Home > Blog > current post title. Each segment should be a link except the current page."

📄 Pagination

  ◀  1  2  [3]  4  5  ...  12  ▶
 
  ◀  Previous arrow
  ▶  Next arrow
  [3]  Current page (highlighted)
  ...  Ellipsis (skipped pages)

Navigation for splitting content across multiple pages. A row of page numbers with previous/next arrows. The current page is highlighted. When there are many pages, an ellipsis (...) replaces the middle ones.

How to prompt AI:

"Add pagination below the post list. Show 10 posts per page with page numbers, previous/next arrows, and ellipsis for large page counts."

Alternative: "Load more" button or infinite scroll. These are different patterns that serve the same purpose (showing more content) but with very different UX. Specify which one you want.

⏳ Progress Bar / Skeleton / Spinner

  PROGRESS BAR                    SPINNER
  ┌────────────────────────────┐
  │ ████████████░░░░░░░░░░░░░░ │     ◠  ← rotating circle
  └────────────────────────────┘
         65% complete              "Loading..."
 
 
  SKELETON SCREEN
  ┌────────────────────────────────────┐
  │  ┌────┐  ░░░░░░░░░░░░░░░░░░░░░░  │
  │  │░░░░│  ░░░░░░░░░░░░░░░         │
  │  └────┘  ░░░░░░░░░░░░░░░░░░░     │
  │                                    │
  │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
  │  ░░░░░░░░░░░░░░░░░░░░░           │
  └────────────────────────────────────┘
     placeholder shapes that pulse
     until real content loads

Three different ways to show "something is happening, please wait":

• Progress bar: Shows a measurable percentage. File uploads, multi-step forms, download progress.
• Spinner: A rotating circle or animation. Used when you don't know how long something will take.
• Skeleton screen: Grey placeholder shapes mimicking the layout of the content that's loading. Feels faster than a spinner because users see the page structure immediately.

How to prompt AI:

"While blog posts are loading, show skeleton cards that match the card layout — a grey rectangle for the image, two lines for the title, and one line for the description. Pulse animation."

Tip: Skeletons feel significantly better than spinners in most cases. If you're loading a list of cards, show skeleton cards. If you're loading a single action result, a spinner is fine.

The Cheat Sheet

For quick reference when you're mid-conversation with AI:

🎯 Why Precise Component Names Matter

In the layout vocabulary post, I said the vocabulary gap between you and AI is the single biggest source of wasted prompts. That's doubly true for interactive components, because they come with behavior.

A sidebar is just a box on the side. Describe it vaguely and the AI still has a decent chance of getting it right. But a toggle switch has specific behavior — it's binary, it applies instantly, it looks like a pill, it slides. Describe it as "an on-off thing" and the AI might give you a checkbox, a dropdown with Yes/No, two radio buttons, or a toggle. All technically correct. Only one is what you wanted.

The name carries the behavior. "Accordion" tells the AI: expandable sections, one header click reveals content, animated open/close. You don't need to describe any of that. The word does the work.

Layout vocabulary gets you the structure right. Component vocabulary gets the interactions right. Together, they cover about 90% of what you'll ever need to describe to an AI when building a web app.

Next time we'll go deeper: form patterns and data display components — date pickers, data tables, chips, tags, steppers, and the rest of the stuff that makes real applications feel complete.

2026.03.01