index.tsx
35 lines
| 1 | import {forwardRef, MouseEventHandler, ReactNode} from 'react'; |
| 2 | import cx from 'classnames'; |
| 3 | import './style.scss'; |
| 4 | |
| 5 | /** |
| 6 | * |
| 7 | * @since 3.0.0 |
| 8 | */ |
| 9 | export type ButtonProps = { |
| 10 | variant?: 'primary' | 'secondary' | 'danger'; |
| 11 | size?: 'small' | 'large'; |
| 12 | type?: 'button' | 'reset' | 'submit'; |
| 13 | children: ReactNode; |
| 14 | onClick?: MouseEventHandler; |
| 15 | disabled?: boolean; |
| 16 | className?: string; |
| 17 | [x: string]: any; |
| 18 | }; |
| 19 | |
| 20 | const Button = forwardRef<HTMLButtonElement, ButtonProps>( |
| 21 | ({children, type = 'button', variant = 'primary', size = 'small', disabled = false, className, ...props}, ref) => ( |
| 22 | <button |
| 23 | ref={ref} |
| 24 | disabled={disabled} |
| 25 | type={type} |
| 26 | className={cx('givewp-button', variant, size, className)} |
| 27 | {...props} |
| 28 | > |
| 29 | {children} |
| 30 | </button> |
| 31 | ) |
| 32 | ); |
| 33 | |
| 34 | export default Button; |
| 35 |