| title | sidebar | ||||
|---|---|---|---|---|---|
Parameters |
|
Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.
Available parameters are listed in the [parameters API reference](../api/parameters.mdx#available-parameters).For example, let’s customize the backgrounds addon via a parameter. We’ll use parameters.backgrounds to define which backgrounds appear in the backgrounds toolbar when a story is selected.
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 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:
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}
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:
We can set the parameters for all stories of a component using the parameters key on the default CSF export:
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}
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):
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}
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.
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.