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 (
Color/Theme |
{themes.map((theme) => (
{theme}
|
))}
{colors.map((color) => (
{color} |
{themes.map((theme) => (
{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 (
);
}