# Writing Your First Story — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-stories

> Create and export stories for a React component.

## Story anatomy

A story is a named export that returns a component with specific props. The default export contains metadata about the component. Together, they make up a Story File.

## Basic story example

Here's a simple Button component story showing the default state.

```tsx
import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button variant="primary">Click me</Button>;
export const Secondary = () => <Button variant="secondary">Cancel</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;
```

## Story file naming

Story files should be named `ComponentName.stories.tsx` and placed next to or near the component file. This keeps stories close to their components.

## Exporting multiple stories

Export multiple named functions from your story file to create different scenarios. Each export becomes a separate story in Storybook.