Storybook · Example Payload

Storybook Button Story Example

Example Storybook Button component story in Component Story Format (CSF)

Accessibility TestingComponent DocumentationComponent TestingDesign SystemsFrontend DevelopmentOpen SourceReactUI ComponentsVisual Testing

Storybook Button Story Example is an example object payload from Storybook, with 3 top-level fields. It illustrates the shape of data this provider's APIs accept or return.

Top-level fields

descriptionfilenamecontent

Example Payload

{
  "description": "Example Storybook Button component story in Component Story Format (CSF)",
  "filename": "Button.stories.tsx",
  "content": {
    "defaultExport": {
      "title": "Components/Button",
      "component": "Button",
      "tags": ["autodocs"],
      "args": {
        "onClick": "fn()"
      },
      "argTypes": {
        "backgroundColor": {
          "control": "color"
        },
        "size": {
          "control": {
            "type": "select"
          },
          "options": ["small", "medium", "large"]
        }
      }
    },
    "namedExports": {
      "Primary": {
        "args": {
          "primary": true,
          "label": "Button"
        }
      },
      "Secondary": {
        "args": {
          "label": "Button"
        }
      },
      "Large": {
        "args": {
          "size": "large",
          "label": "Button"
        }
      },
      "Small": {
        "args": {
          "size": "small",
          "label": "Button"
        }
      },
      "WithInteraction": {
        "args": {
          "primary": true,
          "label": "Click me"
        },
        "play": "async ({ canvasElement }) => { const canvas = within(canvasElement); const button = canvas.getByRole('button', { name: /click me/i }); await userEvent.click(button); await expect(button).toHaveFocus(); }"
      }
    }
  }
}