@@ -194,7 +194,7 @@ Specifies the initial state of the source panel.
Type: `StoryProps['inline'] | StoryProps['height'] | StoryProps['autoplay']`
-Specifies props passed to the inner `Story` block. See [StoryProps](./doc-block-story.md#storyprops).
+Specifies the props passed to the inner `Story` block. For more information, see the `Story` Doc Block [documentation](./doc-block-story.md).
### `withToolbar`
diff --git a/docs/api/index.md b/docs/api/index.md
index e49768d52a69..168f0d0456a4 100644
--- a/docs/api/index.md
+++ b/docs/api/index.md
@@ -79,6 +79,12 @@ An overview of all available API references for Storybook.
about args that are not explicitly set.
+
+ | Parameters |
+
+ Parameters are static metadata used to configure your stories addons in Storybook. They are specified at the story, meta (component), project (global) levels.
+ |
+
diff --git a/docs/api/parameters.md b/docs/api/parameters.md
new file mode 100644
index 000000000000..53174e387492
--- /dev/null
+++ b/docs/api/parameters.md
@@ -0,0 +1,247 @@
+---
+title: 'Parameters'
+---
+
+Parameters are static metadata used to configure your [stories](../get-started/whats-a-story.md) and [addons](../addons/introduction.md) in Storybook. They are specified at the story, meta (component), project (global) levels.
+
+## Story parameters
+
+
+
+βΉοΈ Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level.
+
+
+
+Parameters specified at the story level apply to that story only. They are defined in the `parameters` property of the story (named export):
+
+
+
+
+
+
+
+## Meta parameters
+
+
+
+βΉοΈ Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level.
+
+
+
+Parameter's specified in a [CSF](../writing-stories/introduction.md#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the `meta` (default export):
+
+
+
+
+
+
+
+## Project parameters
+
+Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the default export in your `.storybook/preview.js|ts` file:
+
+
+
+
+
+
+
+## Available parameters
+
+Storybook only accepts a few parameters directly.
+
+### `layout`
+
+Type: `'centered' | 'fullscreen' | 'padded'`
+
+Default: `'padded'`
+
+Specifies how the canvas should [lay out the story](../configure/story-layout.md).
+
+- **centered**: Center the story within the canvas
+- **padded**: (default) Add padding to the story
+- **fullscreen**: Show the story as-is, without padding
+
+### `options`
+
+Type:
+
+```ts
+{
+ storySort?: StorySortConfig | StorySortFn;
+}
+```
+
+
+
+The `options` parameter can _only_ be applied at the [project level](#project-parameters).
+
+
+
+#### `options.storySort`
+
+Type: `StorySortConfig | StorySortFn`
+
+```ts
+type StorySortConfig = {
+ includeNames?: boolean;
+ locales?: string;
+ method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
+ order?: string[];
+};
+
+type Story = {
+ id: string;
+ importPath: string;
+ name: string;
+ title: string;
+};
+
+type StorySortFn = (a: Story, b: Story) => number;
+```
+
+Specifies the order in which stories are displayed in the Storybook UI.
+
+When specifying a configuration object, the following options are available:
+
+- **includeNames**: Whether to include the story name in the sorting algorithm. Defaults to `false`.
+- **locales**: The locale to use when sorting stories. Defaults to your system locale.
+- **method**: The sorting method to use. Defaults to `alphabetical`.
+ - **alphabetical**: Sort stories alphabetically by name.
+ - **alphabetical-by-kind**: Sort stories alphabetically by kind, then by name.
+ - **custom**: Use a custom sorting function.
+- **order**: Stories in the specified order will be displayed first, in the order specified. All other stories will be displayed after, in alphabetical order. The order array can accept a nested array to sort 2nd-level story kinds, e.g. `['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components']`.
+
+When specifying a custom sorting function, the function behaves like a typical JavaScript sorting function. It accepts two stories to compare and returns a number. For example:
+
+```js
+(a, b) => (a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }));
+```
+
+See [the guide](../writing-stories/naming-components-and-hierarchy/#sorting-stories) for usage examples.
+
+---
+
+### Essential addons
+
+All other parameters are contributed by addons. The [essential addon's](../addons/essentials.md) parameters are documented on their individual pages:
+
+- [Actions](../essentials/actions.md#parameters)
+- [Backgrounds](../essentials/backgrounds.md#parameters)
+- [Controls](../essentials/controls.md#parameters)
+- [Highlight](../essentials/highlight.md#parameters)
+- [Interactions](../essentials/interactions.md#parameters)
+- [Measure & Outline](../essentials/measure-and-outline.md#parameters)
+- [Viewport](../essentials/viewport.md#parameters)
+
+## Parameter inheritance
+
+No matter where they're specified, parameters are ultimately applied to a single story. Parameters specified at the project (global) level are applied to every story in that project. Those specified at the meta (component) level are applied to every story associated with that meta. And parameters specified for a story only apply to that story.
+
+When specifying parameters, they are merged together in order of increasing specificity:
+
+1. Project (global) parameters
+2. Meta (component) parameters
+3. Story parameters
+
+
+
+βΉοΈ Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
+
+
+
+In other words, the following specifications of parameters:
+
+```js
+// .storybook/preview.js|ts
+
+const preview = {
+ // π Project-level parameters
+ parameters: {
+ layout: 'centered',
+ demo: {
+ demoProperty: 'a',
+ demoArray: [1, 2],
+ },
+ },
+ // ...
+};
+export default preview;
+```
+
+```js
+// Dialog.stories.js|ts
+
+const meta = {
+ component: Dialog,
+ // π Meta-level parameters
+ parameters: {
+ layout: 'fullscreen',
+ demo: {
+ demoProperty: 'b',
+ anotherDemoProperty: 'b',
+ },
+ },
+};
+export default meta;
+
+// (no additional parameters specified)
+export const Basic = {};
+
+export const LargeScreen = {
+ // π Story-level parameters
+ parameters: {
+ layout: 'padded',
+ demo: {
+ demoArray: [3, 4],
+ },
+ },
+};
+```
+
+Will result in the following parameter values applied to each story:
+
+```js
+// Applied story parameters
+
+// For the Basic story:
+{
+ layout: 'fullscreen',
+ demo: {
+ demoProperty: 'b',
+ anotherDemoProperty: 'b',
+ demoArray: [1, 2],
+ },
+}
+
+// For the LargeScreen story:
+{
+ layout: 'padded',
+ demo: {
+ demoProperty: 'b',
+ anotherDemoProperty: 'b',
+ demoArray: [3, 4],
+ },
+}
+```
diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md
index 99f56c1d7905..f3b22db33230 100644
--- a/docs/essentials/actions.md
+++ b/docs/essentials/actions.md
@@ -97,6 +97,62 @@ It is also possible to detect if your component is emitting the correct HTML eve
This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is ` `. The selector is optional; it defaults to all elements.
+## API
+
+### Parameters
+
+This addon contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `actions` namespace:
+
+#### `argTypesRegex`
+
+Type: `string`
+
+Create actions for each arg that matches the regex. Please note the significant [limitations of this approach](#automatically-matching-args), as described above.
+
+#### `disable`
+
+Type: `boolean`
+
+Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.md#disabling-addons) for more information.
+
+This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
+
+#### `handles`
+
+Type: `string[]`
+
+Binds a standard HTML event handler to the outermost HTML element rendered by your component and triggers an action when the event is called for a given selector. The format is ` `. The selector is optional; it defaults to all elements.
+
+See the [action event handlers](#action-event-handlers) section, above, for more information.
+
+### Exports
+
+This addon contributes the following exports to Storybook:
+
+```js
+import { action } from '@storybook/addon-actions';
+```
+
+#### `action`
+
+Type: `(name?: string) => void`
+
+Allows you to create an action that appears in the actions panel of the Storybook UI when clicked. The action function takes an optional name parameter, which is used to identify the action in the UI.
+
+
+
+
+
+
+
## Advanced / legacy usage
There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md
index 3c295a12b360..c1a51bc9aab4 100644
--- a/docs/essentials/backgrounds.md
+++ b/docs/essentials/backgrounds.md
@@ -125,3 +125,90 @@ If you need to disable the grid for a specific story, set the `backgrounds` para
/>
+
+## API
+
+### Parameters
+
+This addon contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `backgrounds` namespace:
+
+#### `default`
+
+Type: `string`
+
+Default background color. Must match the `name` property of one of the [available colors](#values).
+
+#### `disable`
+
+Type: `boolean`
+
+Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.md#disabling-addons) for more information.
+
+This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
+
+#### `grid`
+
+Type:
+
+```ts
+{
+ cellAmount?: number;
+ cellSize?: number;
+ disable?: boolean;
+ offsetX: number;
+ offsetY: number;
+ opacity?: number;
+}
+```
+
+##### `grid.cellAmount`
+
+Type: `number`
+
+Default: `5`
+
+Specify the size of the minor grid lines.
+
+##### `grid.cellSize`
+
+Type: `number`
+
+Default: `20`
+
+Specify the size of the major grid lines.
+
+##### `grid.disable`
+
+Type: `boolean`
+
+Disable the grid.
+
+##### `grid.offsetX`
+
+Type: `number`
+
+Default: `0` if [story layout](../api/parameters.md#layout) is `'fullscreen'`; `16` if story layout is `'padded'`
+
+Horizontal offset of the grid.
+
+##### `grid.offsetY`
+
+Type: `number`
+
+Default: `0` if [story layout](../api/parameters.md#layout) is `'fullscreen'`; `16` if story layout is `'padded'`
+
+Vertical offset of the grid.
+
+##### `grid.opacity`
+
+Type: `number`
+
+Default: `0.5`
+
+Opacity of the grid lines.
+
+#### `values`
+
+Type: `{ name: string; value: string }[]`
+
+Available background colors. See above for a [usage example](#configuration).
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 5d86420c4ab0..51d27d976687 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -647,3 +647,59 @@ Enabling this feature will generate a `storybook-docgen/index.json` automaticall
+
+## API
+
+### Parameters
+
+This addon contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `controls` namespace:
+
+#### `disable`
+
+Type: `boolean`
+
+Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.md#disabling-addons) for more information.
+
+This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
+
+#### `exclude`
+
+Type: `string[] | RegExp`
+
+Specifies which properties to exclude from the Controls addon panel. Any properties whose names match the regex or are part of the array will be left out. See [usage example](#filtering-controls), above.
+
+#### `expanded`
+
+Type: `boolean`
+
+Show the full documentation, including description and default value, for each property in the Controls addon panel. See [usage example](#show-full-documentation-for-each-property), above.
+
+#### `hideNoControlsWarning`
+
+Type: `boolean`
+
+Hide the warning that appears when no controls are defined for a story. See [usage example](#hide-nocontrols-warning), above.
+
+#### `include`
+
+Type: `string[] | RegExp`
+
+Specifies which properties to include in the Controls addon panel. Any properties whose names don't match the regex or are not part of the array will be left out. See [usage example](#filtering-controls), above.
+
+#### `presetColors`
+
+Type: `(string | { color: string; title?: string })[]`
+
+Specify preset color swatches for the color picker control. Color value many be any valid CSS color. See [usage example](#specify-initial-preset-color-swatches), above.
+
+#### `sort`
+
+Type: `'none' | 'alpha' | 'requiredFirst'`
+
+Default: `'none'`
+
+Specifies how the controls are sorted.
+
+- **none**: Unsorted, displayed in the same order the arg types are processed in
+- **alpha**: Sorted alphabetically, by the arg type's name
+- **requiredFirst**: Same as `alpha`, with any required arg types displayed first
diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md
index 0968be5d36cc..6a266a2d0a02 100644
--- a/docs/essentials/highlight.md
+++ b/docs/essentials/highlight.md
@@ -76,4 +76,38 @@ By default, the addon applies a standard style to the highlighted elements you'v
]}
/>
-
\ No newline at end of file
+
+
+## API
+
+### Parameters
+
+This addon contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `highlight` namespace:
+
+#### `disable`
+
+Type: `boolean`
+
+Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.md#disabling-addons) for more information.
+
+This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
+
+### Exports
+
+This addon contributes the following exports to Storybook:
+
+```js
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+```
+
+#### `HIGHLIGHT`
+
+Type: `string`
+
+An event that highlights DOM elements. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight. See the [usage example](#highlighting-dom-elements), above.
+
+#### `RESET_HIGHLIGHT`
+
+Type: `string`
+
+An event to clear all highlights from highlighted elements. See the [usage example](#reset-highlighted-elements), above.
diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md
index dc86f7b94f9a..47554e2b70fd 100644
--- a/docs/essentials/interactions.md
+++ b/docs/essentials/interactions.md
@@ -88,3 +88,17 @@ Any `args` that have been marked as an Action, either using the [argTypes annota
To mock functions in your Storybook stories for reliable and isolated component testing, use the `jest` import from `@storybook/jest`. This allows you to avoid configuring Jest globally in your project.
+
+## API
+
+### Parameters
+
+This addon contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `interactions` namespace:
+
+#### `disable`
+
+Type: `boolean`
+
+Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.md#disabling-addons) for more information.
+
+This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
diff --git a/docs/essentials/measure-and-outline.md b/docs/essentials/measure-and-outline.md
index 277e9ee4c164..883c9ac90a39 100644
--- a/docs/essentials/measure-and-outline.md
+++ b/docs/essentials/measure-and-outline.md
@@ -31,3 +31,17 @@ With Storybook's Outline addon, you can toggle the outlines associated with all