Storybook is the standard tool for component documentation and visual testing. Its vocabulary — stories, args, decorators, interaction tests — appears in design system and component library discussions.
0 / 5 completed
1 / 5
A developer says: 'Write a story for each significant state of the button component.' What is a Storybook story?
A Storybook story is a named function that renders a component with specific props representing one state: export const Primary: Story = { args: { label: 'Click me', variant: 'primary' } }. Each story documents one use case. Multiple stories cover multiple states: Primary, Disabled, Loading, Error. In discussions: 'write a story for the error state' means add a Storybook story that shows the component with error props, making that state visible and testable.
2 / 5
A PR update changes the component stories to use CSF 3 (Component Story Format). What is CSF?
CSF (Component Story Format) is the Storybook standard for writing stories as named ES module exports: export default { component: Button }; export const Primary = { args: { ... } }. Each named export is a story. CSF 3 simplified the format by using plain objects instead of functions. It's framework-agnostic and portable. In discussions: 'migrate to CSF 3' means update story files to use the object notation instead of template-based stories.
3 / 5
A developer says: 'Use args instead of hardcoding props in the story template.' What are args in Storybook?
Storybook args are prop values declared separately from the story template. args: { label: 'Submit', disabled: false } powers the Controls addon — letting users change prop values in the Storybook UI without editing code. Args are also inherited: you can set default args at the component level and override them per story. In discussions: 'use args' means make the props interactive in Storybook rather than hardcoded in the template.
4 / 5
A developer says: 'Add a decorator to wrap stories with the app's theme provider.' What is a Storybook decorator?
A Storybook decorator wraps stories with extra context. Example: decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>]. Decorators can be defined at the story, component, or global level. They add providers, padding, backgrounds, or mocked context that components need to render correctly. In discussions: 'add a decorator for the theme provider' means wrap all stories in the app's theme so components render with proper styles.
5 / 5
A developer says: 'Run interaction tests in Storybook to verify the form submission flow.' What are interaction tests?
Storybook interaction tests use the play function in a story to simulate user interactions and assert outcomes: play: async ({ canvasElement }) => { await userEvent.click(submitButton); await expect(successMessage).toBeVisible() }. They run in the browser, testing the real rendered component with real events. In CI with storybook/test-runner, they execute automatically. In discussions: 'add a play function' means write automated interaction tests directly in Storybook.