import { Meta, Story } from '@storybook/react'; import { PropsWithChildren } from 'react'; import { Download } from 'react-feather'; import { Button, Props } from './Button'; export default { component: Button, title: 'Components/Buttons/Button', } as Meta; export function DifferentTheme() { const colors = [ 'primary', 'secondary', 'success', 'danger', 'dangerlight', 'warning', 'light', 'link', ] as const; const themes = ['light', 'dark', 'highcontrast'] as const; const states = ['', 'disabled'] as const; return ( {themes.map((theme) => ( ))} {colors.map((color) => ( {themes.map((theme) => ( ))} ))}
Color/Theme {theme}
{color} {states.map((state) => ( ))}
); } function Template({ onClick, color, size, disabled, }: JSX.IntrinsicAttributes & PropsWithChildren) { return ( ); } export const Primary: Story> = Template.bind({}); Primary.args = { color: 'primary', size: 'small', disabled: false, onClick: () => { alert('Hello Button!'); }, }; export function Disabled() { return ( ); } export function Warning() { return ( ); } export function Success() { return ( ); } export function Danger() { return ( ); } export function ButtonIcon() { return ( ); } export function ButtonIconLarge() { return ( ); } export function ButtonIconMedium() { return ( ); } export function ButtonIconXSmall() { return ( ); } export function Default() { return ( ); } export function Link() { return ( ); } export function XSmall() { return ( ); } export function Small() { return ( ); } export function Large() { return ( ); }