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

import React from 'react'

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