popup-forms-react/src/components/controls/ButtonPrimary.jsx

import React from 'react'

function PrimaryButton(props) {
    const {type, text, action, disabled} = props
    return <>
        <button
            type={type||'button'}
            className="
                appearance-none
                flex
                relative
                w-full
                p-3
                border-0
                rounded-md
                border-primary-800
                bg-primary-800
                text-white
                cursor-pointer
                shadow-md
                hover:bg-primary-500
                focus:bg-primary-500
                focus:outline-none
                active:shadow-inner
                active:bg-primary-800
                active:transform
                active:translate-y-px
                disabled:bg-primary-800
                disabled:opacity-50
                disabled:shadow-md
                disabled:translate-y-0
                disabled:cursor-not-allowed
            "
            onClick={action}
            disabled={disabled}
            aria-disabled={disabled}
        >
            <div className="sm:text-lg flex-grow text-center px-6">{text||'Primary Button'}</div>
        </button>
        {disabled && <div tabIndex="0" className="sr-only">Disabled button: {text||'Primary Button'}. Please fill all necessary fields.</div>}
    </>
}
export default PrimaryButton