Import .mdx from grafana-ui components

Grafana Plugin Development
1

I’m new in plugin development, so I start using some off the grafana-ui components. In this case, the Simple Button: https://developers.grafana.com/ui/latest/index.html?path=/story/buttons-button--simple.

This component has to import some dependences, so I took the grafana-ui folder from GitHub and put it at the root of my project using the same structure:
package/grafana-ui/src/...

Actually, I don’t know if it’s the right way to do it

But I can’t import Button.mdx

import React from 'react';

import { select, text, boolean } from '@storybook/addon-knobs';
import { Button, ButtonVariant } from '@grafana/ui';
import { withCenteredStory, withHorizontallyCenteredStory } from '../package/grafana-ui/src/utils/storybook/withCenteredStory';
import { getIconKnob } from '../package/grafana-ui/src/utils/storybook/knobs';

import mdx from '../package/grafana-ui/src/components/button/Button.mdx'

import { ComponentSize } from '../package/grafana-ui/src/types/size';

Thanks for helping!

2

You shouldn’t need to use the MDX in your plugin. It’s mainly for Storybook (the docs page you link to).

To use a Button from grafana-ui, you first need to import it:

import { Button } from '@grafana/ui';

Then you can use it in your render function, like this:

<Button variant="primary" size="md">
  Click me!
</Button>

Let me know if that helps!