storybook/docs/snippets/vue/button-story-with-emojis.mdx.mdx
2021-10-06 19:14:13 +01:00

32 lines
746 B
Plaintext

```md
<!-- Button.stories.mdx -->
import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta title="Components/Button" component={Button}/>
<!-- The render function is a framework specific construct to define how the story should render -->
<Story
name="Primary"
render={() => ({
components: {Button},
template: `<Button backgroundColor="#ff0" label="Button" />`,
})} />
<Story
name="Secondary"
render={() => ({
components: { Button },
template: `<Button backgroundColor="#ff0" label="😄👍😍💯" />`,
})} />
<Story
name="Tertiary"
render={() => ({
components: { Button },
template: `<Button backgroundColor="#ff0" label="📚📕📈🤓" />`,
})} />
```