Button Showcase with Dynamic Arguments

Create a Storybook story file for a customizable Button component that demonstrates dynamic argument handling and control generation.

Requirements

Your story should showcase a button component with multiple configurable properties:

1. Text content - The button should display customizable text
2. Visual variant - Support different visual styles (e.g., primary, secondary, danger)
3. Size option - Support different sizes (e.g., small, medium, large)
4. Disabled state - Allow toggling the disabled state
5. Click handler - Capture and log click events

Test Cases

• When the button text argument is changed in the controls, the button displays the updated text @test
• When the variant argument is set to "danger", the button applies danger styling @test
• When the size argument is set to "large", the button renders with large size styling @test
• When the disabled argument is true, the button is disabled and not clickable @test

Implementation

The story file should:

• Export a proper meta configuration for the button component
• Define default argument values that will appear in the Storybook controls panel
• Configure argument types to generate appropriate UI controls (text inputs, select dropdowns, checkboxes, etc.)
• Include at least one story that demonstrates the button with specific argument values

@generates

Dependencies { .dependencies }

storybook { .dependency }

Provides the core Storybook framework for building UI component stories.

@storybook/react { .dependency }

Provides React integration for Storybook stories.

@storybook/addon-actions { .dependency }

Provides action logging for event handlers.

Button Component API

For testing purposes, assume the following Button component exists:

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps>;