In storybook MDX file, how to I enter literal markup

Question

I created a story using MDX. I want to demonstrate my inhouse-styles for buttons.

The story contains the following:

<a class="btn btn-primary">
Primary Button
</a>

When rendered, story book shows

<a class="sbdocs sbdocs-a btn btn-primary css-19nbuh3" target="_top">
Primary Button
<a>

As a result, my button does not display with the correct css.

How do I prevent storybook MDX from changing markup?

Answer 1

Put your markup inside of <Preview> tags:

<Preview>
  <a class="btn btn-primary">
  Primary Button
  </a>
</Preview>