Use with globals and params to control snapshot capturing behavior
When using Chromatic with Storybook, you can control how a snapshot is captured via Storybook parameters and globals.
Parameters
Parameters are static metadata that can be attached at the story, component (meta), and project (global) levels. For more information on how to use parameters in Storybook, see: Config with story params.
| Parameter | Type | Purpose |
|---|---|---|
chromatic.delay | number | Delay the capture by specified number of milliseconds. |
chromatic.diffIncludeAntiAliasing | boolean | Include anti-aliasing in diffs |
chromatic.diffThreshold | number | Control visual sensitivity of diffs, learn more |
chromatic.disableSnapshot | boolean | Skip test |
chromatic.ignoreSelectors | string[] | Ignore elements from diff |
chromatic.pauseAnimationAtEnd | boolean | Pause animation at end |
chromatic.forcedColors | string | Control CSS forced colors mode |
chromatic.prefersReducedMotion | string | Control CSS reduce motion setting |
chromatic.media | string | Enable CSS print media styles |
chromatic.cropToViewport | boolean | Crop the screenshot to the viewport, learn more |
chromatic.modes | object | Apply modes |
chromatic.viewports | number[] | Legacy API for setting viewports for a story. Use Modes instead. |
Globals
Globals in Storybook represent “global” (as in not story-specific) inputs that affect how a story is rendered.
| Global | Type | Purpose |
|---|---|---|
viewport | object | Use the Storybook viewport feature to control the dimensions of the story |
a11y | object | Configure accessibility tests |
| Custom global | user defined | Custom globals in modes |