woocommerce/plugins/woocommerce-blocks/assets/js/base/components/button/index.js

56 lines
1.4 KiB
JavaScript

/**
* External dependencies
*/
import { Button as WPButton } from 'wordpress-components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import './style.scss';
/** @typedef {import('react')} React */
/**
* Component that visually renders a button but semantically might be `<button>` or `<a>` depending
* on the props.
*
* @param {Object} props Incoming props for the component.
* @param {string} props.className CSS classname used.
* @param {boolean} props.showSpinner Whether to show spinner or not.
* @param {React.ReactChildren} props.children Child components passed in.
* @param {Object} props.props Rest of incoming props.
*/
const Button = ( { className, showSpinner = false, children, ...props } ) => {
const buttonClassName = classNames(
'wc-block-components-button',
className,
{
'wc-block-components-button--loading': showSpinner,
}
);
return (
<WPButton className={ buttonClassName } { ...props }>
{ showSpinner && (
<span
className="wc-block-components-button__spinner"
aria-hidden="true"
/>
) }
<span className="wc-block-components-button__text">
{ children }
</span>
</WPButton>
);
};
Button.propTypes = {
className: PropTypes.string,
showSpinner: PropTypes.bool,
children: PropTypes.node,
};
export default Button;