|
- 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
- py-3
- border-0
- rounded-md
- border-primary-800
- bg-primary-800
- text-white
- truncate
- cursor-pointer
- transform
- shadow-md
- hover:bg-primary-500
- focus:bg-primary-500
- focus:outline-none
- active:shadow-inner
- active:bg-primary-800
- active:scale-98
- disabled:bg-primary-800
- disabled:opacity-50
- disabled:shadow-md
- disabled:scale-100
- disabled:cursor-not-allowed
- "
- onClick={action}
- disabled={disabled}
- aria-disabled={disabled}
- >
- <div className="sm:text-lg flex-grow text-center px-2">{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
|