0Pricing
Vue Academy · Lesson

Controls, Actions, and Args

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

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" },
  },
}

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