react#ButtonHTMLAttributes TypeScript Examples

The following examples show how to use react#ButtonHTMLAttributes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: buttons.tsx    From react-celo with MIT License 6 votes vote down vote up 
export function PrimaryButton(
  props: ButtonHTMLAttributes<HTMLButtonElement>
): React.ReactElement {
  return (
    <button
      {...props}
      className={`px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 ${
        props.disabled
          ? 'cursor-not-allowed'
          : 'hover:from-purple-700 hover:to-indigo-700'
      } mt-2 ml-auto ${props.className || ''}`}
    />
  );
}
Example #2
Source File: buttons.tsx    From react-celo with MIT License 6 votes vote down vote up 
export function SecondaryButton(
  props: ButtonHTMLAttributes<HTMLButtonElement>
): React.ReactElement {
  return (
    <button
      {...props}
      className={`px-4 py-2 border border-transparent rounded-md text-base font-medium outline-none focus:outline-none ${
        props.className || ''
      } ${
        props.disabled ? 'cursor-not-allowed text-slate-400' : 'text-purple-700'
      }`}
    />
  );
}
Example #3
Source File: DisconnectButton.tsx    From mysterium-vpn-desktop with MIT License 6 votes vote down vote up 
DisconnectButton = observer(function DisconnectButton() {
    const { connection } = useStores()
    const text = ((): string => {
        switch (connection.status) {
            case ConnectionStatus.NOT_CONNECTED:
                return "Connect"
            case ConnectionStatus.CONNECTING:
                return "Cancel"
            case ConnectionStatus.CONNECTED:
            case ConnectionStatus.ON_HOLD:
                return "Disconnect"
            case ConnectionStatus.DISCONNECTING:
                return "Disconnecting"
        }
        return ""
    })()
    const onClick = async (): Promise<void> => {
        return await connection.disconnect()
    }
    const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = {
        disabled: connection.gracePeriod,
        onClick,
    }
    return <SecondaryButton {...buttonProps}>{text}</SecondaryButton>
})
Example #4
Source File: default.tsx    From use-platform with MIT License 6 votes vote down vote up 
Button: FC<ButtonHTMLAttributes<HTMLButtonElement>> = (props) => {
  const [isFocused, onFocusChange] = useState(false)
  const { focusProps } = useFocus({ ...props, onFocusChange })

  // TODO: use focus visible
  return (
    <button className={classNames.button} {...props} {...focusProps} data-focused={isFocused} />
  )
}
Example #5
Source File: PlainButton.tsx    From graphhopper-maps with Apache License 2.0 5 votes vote down vote up 
export default function (props: ButtonHTMLAttributes<HTMLButtonElement>) {
    const combinedClass = styles.button + ' ' + props.className
    return (
        <button {...props} className={combinedClass}>
            {props.children}
        </button>
    )
}
Example #6
Source File: Button.tsx    From mStable-apps with GNU Lesser General Public License v3.0 5 votes vote down vote up 
Button = styled(UnstyledButton).attrs<ButtonHTMLAttributes<never>>(({ type = 'button', ...attrs }) => ({
  ...attrs,
  type,
}))<Props>`
  ${ButtonCss}
`