# give/4.18.0/src/Views/Components/AdminUI/Button/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 35 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/AdminUI/Button/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Views/Components/AdminUI/Button/index.tsx
- Modified: 2023-10-16T17:55:46+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/give/4.18.0/code/src/Views/Components/AdminUI/Button/index.tsx#L10-L20`.

```tsx
import {forwardRef, MouseEventHandler, ReactNode} from 'react';
import cx from 'classnames';
import './style.scss';

/**
 *
 * @since 3.0.0
 */
export type ButtonProps = {
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'small' | 'large';
    type?: 'button' | 'reset' | 'submit';
    children: ReactNode;
    onClick?: MouseEventHandler;
    disabled?: boolean;
    className?: string;
    [x: string]: any;
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({children, type = 'button', variant = 'primary', size = 'small', disabled = false, className, ...props}, ref) => (
        <button
            ref={ref}
            disabled={disabled}
            type={type}
            className={cx('givewp-button', variant, size, className)}
            {...props}
        >
            {children}
        </button>
    )
);

export default Button;

```