# code-snippets/3.10.2/js/components/common/Button.tsx

Code Snippets, version 3.10.2. 50 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/Button.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.2/raw/js/components/common/Button.tsx
- Modified: 2025-08-29T08:54:36+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.10.2/code/js/components/common/Button.tsx#L10-L20`.

```tsx
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>

```