@storybook/addon-actions

Storybook Addon Actions

Storybook Addon Actions can be used to display data received by event handlers in Storybook.

Framework Support

Installation

Actions is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-actions

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-actions'],
};

Usage

The basic usage is documented in the documentation. For legacy usage, see the advanced README.

Similar packages

Other packages similar to @storybook/addon-actions

@storybook/addon-knobs

This package allows you to edit React props dynamically using the Storybook UI. It is similar to @storybook/addon-actions in that it enhances the interactive capabilities of Storybook, but it focuses on editing props rather than logging actions.

@storybook/addon-controls

This addon provides a UI for editing the properties of components. It is the evolution of @storybook/addon-knobs and offers a more integrated and automatic way to create property controls based on component metadata. It differs from @storybook/addon-actions by focusing on component inputs rather than capturing user interactions.

@storybook/addon-viewport

The addon-viewport allows you to adjust the viewport size to test responsive designs within Storybook. While it does not log actions like @storybook/addon-actions, it complements the interactive testing experience by simulating different screen sizes.