09ef1f000f
- Theme: momentry (custom theme with REST API routes) - Plugins: code-snippets (contains all API proxies) - Languages: zh_TW translations - Excludes: cache, backups, uploads, logs
50 lines
929 B
TypeScript
50 lines
929 B
TypeScript
import React from 'react'
|
|
import classnames from 'classnames'
|
|
import type { ButtonHTMLAttributes } from 'react'
|
|
|
|
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'name'> {
|
|
id?: string
|
|
name?: string
|
|
primary?: boolean
|
|
secondary?: boolean
|
|
small?: boolean
|
|
large?: boolean
|
|
link?: boolean
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
id,
|
|
children,
|
|
className,
|
|
name,
|
|
primary = false,
|
|
secondary = false,
|
|
small = false,
|
|
large = false,
|
|
link = false,
|
|
type = 'button',
|
|
onClick,
|
|
...props
|
|
}) =>
|
|
<button
|
|
id={id ?? name}
|
|
name={name}
|
|
type={type}
|
|
{...props}
|
|
onClick={event => {
|
|
if (onClick) {
|
|
event.preventDefault()
|
|
onClick(event)
|
|
}
|
|
}}
|
|
className={classnames('button', className, {
|
|
'button-primary': primary,
|
|
'button-secondary': secondary,
|
|
'button-large': large,
|
|
'button-small': small,
|
|
'button-link': link
|
|
})}
|
|
>
|
|
{children}
|
|
</button>
|