Parameters

Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.

<Callout variant="info"> Available parameters are listed in the [parameters API reference](../api/parameters.mdx#available-parameters). </Callout>

For example, let’s customize the backgrounds feature via a parameter. We’ll use parameters.backgrounds to define which backgrounds appear in the backgrounds toolbar when a story is selected.

Story parameters

<IfRenderer renderer="svelte">

With Svelte, we can set the parameters property in the Story component to define parameters for a single story using Svelte CSF with the native templating syntax, or we can use the parameters key on a CSF named export:

</IfRenderer>

<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid' ]}>

We can set a parameter for a single story with the parameters key on a CSF export:

</IfRenderer> <CodeSnippets path="parameters-in-story.md" />

Component parameters

<IfRenderer renderer="svelte">

To define parameters for all stories of a component, we can add the parameters property in the defineMeta function of a Svelte CSF story file, or we can use the parameters key on the default CSF export:

</IfRenderer> <If notRenderer="svelte">

We can set the parameters for all stories of a component using the parameters key on the default CSF export:

</If> <CodeSnippets path="parameters-in-meta.md" />

Global parameters

We can also set the parameters for all stories via the parameters export of your .storybook/preview.js|ts file (this is the file where you configure all stories):

<CodeSnippets path="parameters-in-preview.md" />

Setting a global parameter is a common way to configure addons. With backgrounds, you configure the list of backgrounds that every story can render in.

Rules of parameter inheritance

The way the global, component and story parameters are combined is:

• More specific parameters take precedence (so a story parameter overwrites a component parameter which overwrites a global parameter).
• Parameters are merged, so keys are only ever overwritten and never dropped.

The merging of parameters is important. This means it is possible to override a single specific sub-parameter on a per-story basis while retaining most of the parameters defined globally.

If you are defining an API that relies on parameters (e.g., an addon) it is a good idea to take this behavior into account.