Button.css

@import "../../index.css";

Button.js

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

import "./Button.css";

const buttonClasses = variant =>
  classNames({
    'border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500': !variant || variant === 'primary',
    'border-transparent text-white bg-red-600 focus:ring-red-700 focus:border-red-600': variant === 'danger-primary',
    'border-grey-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500': variant === 'secondary',
    'border-red-600 text-red-600 bg-white focus:ring-red-600 focus:border-red-600': variant === 'danger',
    'inline-flex items-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium focus:outline-node focus:ring-2 focus:ring-offset-2 ': true
  });

const Button = ({ variant, children, onClick, ...rest }) => (
  <button className={buttonClasses(variant)} onClick={onClick} rest>{children}</button>
);

Button.propTypes = {
  variant: PropTypes.string,
  onClick: PropTypes.func
};

export default Button;

Button.stories.js

import React from 'react';

import Button from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    variant: { 
        name: 'variant',
        type: { name: 'string', required: false },
        control: { type: 'string' } 
    },
  },
};

const Template = (args) => <Button {...args} >A Button</Button>;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
    variant: 'secondary',
}

index.js

import Button from "./Button";
export default Button;