Button Component

This is an example of a Component Page

It is similar to the other pages in that you can use Markdown/MDX, but it expects to find your component documentation in the /components directory (although you can change that in your gatsby-config.js file by setting the componentLibPath). There is also support for showing components from a Storybook build. By default it is set to pull from the default Storybook build path (/storybook/iframe.html), but that is configurable in gatsby-config.js by setting UILibPath.

The id for your component is the ID that Storybook uses to identify the component in their iframe, which is COMPONENT_DIRECTORY--COMPONTENT_NAME (you can find this in the Storybook URL). There is also a height prop that you can configure to increase the height of the iframe. The example button below uses the following code:

<StorybookComponent id="button--example" height="75px" />
<Button>Click Here</Button>

Next: Another Component Example