# code-snippets/3.6.3/js/common/Button.tsx

Code Snippets, version 3.6.3. 43 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.6.3/code/js/common/Button.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.6.3/raw/js/common/Button.tsx
- Modified: 2023-11-13T00:45:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.6.3/code/js/common/Button.tsx#L10-L20`.

```tsx
import React, { ButtonHTMLAttributes } from 'react'
import classnames from 'classnames'

export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'name'> {
	id?: string
	name?: string
	primary?: boolean
	small?: boolean
	large?: boolean
}

export const Button: React.FC<ButtonProps> = ({
	id,
	children,
	className,
	name = 'submit',
	primary = false,
	small = false,
	large = 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-large': large,
			'button-small': small
		})}
	>
		{children}
	</button>

```