0Pricing
Vue Academy · Lesson

Controls, Actions, and Args

argTypes for controls UI, actions addon for event logging, play() for interaction tests.

Controls, Actions, and Args is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Interactive Controls

Storybook’s Controls panel turns a story’s args into live form fields. You change a prop and the component re-renders instantly — no code edits. You shape these fields with argTypes.

Defining argTypes

argTypes describes each prop: its control type, options, and documentation. It sits on the meta object alongside args.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

Text and Boolean Controls

The control type chooses the widget. text gives an input box; boolean gives a toggle switch.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

Select Controls with options

For a fixed set of values use the select control with an options array. The panel renders a dropdown.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

Color and Number Controls

Other handy controls: color opens a color picker, and number (or range) gives numeric input.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

The Actions Addon

The Actions addon logs events in a panel so you can confirm a component emits correctly. You wire an arg to a logging function with fn().

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

How fn() Works

fn() creates a spy that logs calls to the Actions panel. When the component invokes the handler (e.g. an emitted click mapped to onClick), you see the call and its arguments.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

Mapping Events to Handlers

Vue emits events; Storybook maps an on<Event> arg to that emission. An emitted update event surfaces through an onUpdate action arg.

argTypes: {
  onUpdate: { action: "update" },
}

The play Function

A story can include a play function that runs after render to simulate user interaction — clicking, typing — and assert on the result. This turns a story into an interaction test.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

Asserting in play

Inside play you can assert with expect and check that an action was called, making interaction tests visible right in Storybook.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Why Controls + Actions + play Matter

Together they make stories powerful: Controls explore props, Actions verify events fire, and play automates interactions and assertions — documentation and tests in one place.

Quick Check

Check your understanding of controls and actions.

Recap

You learned controls, actions, and args:

  • argTypes shapes the Controls panel: text, boolean, select (with options), color, number/range.
  • The Actions addon logs events; wire handlers with fn() or map events via action.
  • The play function runs after render to simulate interactions with userEvent and assert with expect.
  • Together they make stories explorable, verifiable, and self-documenting.

Frequently asked questions

Is the “Controls, Actions, and Args” lesson free?

Yes — the full text of “Controls, Actions, and Args” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Controls, Actions, and Args”?

argTypes for controls UI, actions addon for event logging, play() for interaction tests. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Controls, Actions, and Args” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Storybook for Vue 3
  2. Writing Component Stories
  3. Controls, Actions, and Args
  4. Storybook Addons and Accessibility Testing
← Back to Vue Academy