Create Button component
This commit is contained in:
parent
f6e2517cb5
commit
b4fd781886
2 changed files with 31 additions and 0 deletions
16
src/components/button.stories.tsx
Normal file
16
src/components/button.stories.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import type { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import { Button } from './button';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as ComponentMeta<typeof Button>;
|
||||
|
||||
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
Default.args = {
|
||||
children: 'Button text',
|
||||
};
|
||||
15
src/components/button.tsx
Normal file
15
src/components/button.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import clsx from 'clsx';
|
||||
import type { ComponentPropsWithoutRef } from 'react';
|
||||
|
||||
interface ButtonProps extends ComponentPropsWithoutRef<'button'> {}
|
||||
|
||||
export const Button = ({ className, ...props }: ButtonProps) => (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
Loading…
Reference in a new issue