Lesson 8 / 25

Addons and Enhancing Stories

Explore Storybook addons to enhance stories with accessibility testing, interactions, and more.

Popular addons

Storybook has a rich ecosystem of addons including Docs, Actions, Interactions, A11y (Accessibility), and more. These addons extend Storybook's capabilities for testing and documentation.

Using the Actions addon

The Actions addon logs callbacks to help debug component interactions.

import { action } from '@storybook/addon-actions';
import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Clickable = () => (
  <Button onClick={action('Button clicked')}>
    Click me
  </Button>
);

Docs addon for auto-generated docs

The Docs addon automatically generates component documentation from your stories and JSDoc comments, creating a living style guide.