@storybook/csf

Defining stories

This feature allows developers to define stories for their components. A story is a single state of a component, and with CSF, stories are written as ES6 modules that export a default object with component metadata and named exports for each story.

import { Meta, Story } from '@storybook/csf';

export default {
  title: 'Button',
  component: Button,
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Args

Args are the dynamic values that a story accepts. They are used to change the state of the component in the story. In the code sample, 'Secondary' is a story that uses the 'Template' but with different args to create a variation of the Button component.

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

Parameters

Parameters are Storybook's mechanism for providing static, named metadata about a story. In this example, the 'Primary' story is given a custom background parameter to change the background color in the Storybook UI.

Primary.parameters = {
  backgrounds: {
    values: [{ name: 'red', value: '#f00' }],
  },
};