ContextQMD
Back to Storybook

Button Story Hypothetical Example

docs/_snippets/button-story-hypothetical-example.md

10.3.61.8 KB
Original Source
js
import { Button } from './Button';

export default {
  component: Button,
};

export const Sample = {
  render: () => ({
    template: '<button :label=label />',
    data: {
      label: 'hello button',
    },
  }),
};
ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';

import { Button } from './Button';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Sample: Story = {
  render: () => ({
    template: '<button :label=label />',
    data: {
      label: 'hello button',
    },
  }),
};
<!-- These serve as abstract examples to inform how frameworks can be built, so "common" is fine here -->
ts
import preview from '../.storybook/preview';

import { Button } from './Button';

const meta = preview.meta({
  component: Button,
});

export const Sample = meta.story({
  render: () => ({
    template: '<button :label=label />',
    data: {
      label: 'hello button',
    },
  }),
});
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
import preview from '../.storybook/preview';

import { Button } from './Button';

const meta = preview.meta({
  component: Button,
});

export const Sample = meta.story({
  render: () => ({
    template: '<button :label=label />',
    data: {
      label: 'hello button',
    },
  }),
});