Variants misrendered

If one (or all) of your story variants is incorrectly rendered (like args being ignored, or displayed with a different state), it may be caused by your storybook renderer.

Is the problem coming from my Storybook?

  1. Navigate to your Storybook URL, for example https://master—5ccbc373887ca40020446347.chromatic.com/?path=/story/badge—basic.

  2. Select the right story, and customize the args in the below “Controls” panel to get the expected display.

  3. Click on the “Open canvas in new tab” icon in the top-right corner.

Storybook UI with a highlighted button to open canvas in new tab
  1. You should see the component opened in a new tab by itself, with the above args/state intact (passed through query params in the URL)
iframe page with a single rendered story

If your story is rendered differently in step 2 versus step 4, it means your Storybook isn’t setup properly and story.to.design won’t be able to import it.