New features for the button component

Summary

Currently I have to do a ton of work to make the Button component work properly in enterprise applications. For example, I need to do the following for virtually all buttons:

• Fix focusIndicator persistence issue.
• Display a loading spinner when loading={true}.
• Handle onClick vs React Router navigation in a graceful way.

All these things combined amounts to a ton of wrapping of this button component. By the time I’m done wrapping it, I have to ask myself: Why am I still using this Button component in the first place?

It would be great if the <Button/> included support for these two additional props:

• Loading state. Example: replace label or icon with small loading spinner.
• First class React Router support (I think this used to be included, but was removed)

[hedleysmith]

Just to chip in on how I’ve used the button component in a Gatsby project.

I needed to change the Button style to show the active menu item within my nav, unfortunately the isPartiallyActive method suggested by @reach/router here didn’t work for me when nested the Button component within a Link component.

So I came up with this, which works nicely:

import React from "react"
import { Link } from "gatsby";
import { useMatch } from "@reach/router"
import { Button } from "grommet"

const CustomLinkButton = ({ activematch, children, ...rest }) => {
  const match = useMatch(activematch);
  const isActive = match ? true : false;
  return (
    <Link {...rest}>
      <Button plain={false} primary={isActive}>
        { children }
      </Button>
    </Link>
  )
}

export default CustomLinkButton

Implementation:

      <CustomLink
        to="/blog"
        activematch="/blog/*"
      >Blog</CustomLink>

A set of Link components for React Router and Reach Router / Gatsby Would be awesome!

[oorestisime]

Hey again,

So we spend some time thinking about this button loading feature and we are a bit unsure whether adding it is a good idea. We definetely see some value in it but we have are hesitating for the following reasons:

• its kind of easy to do this on your own https://codesandbox.io/s/grommet-v2-template-45oq0
• loading is kind of a misconception here, the button would be disabled but term busy might fit best (obviously not a blocker)
• when the needs present for such button usually we need to take care about the busy/disabled state of the rest of the page. When you are filling a form and click submit what happens if you make the button busy but you can still edit the form? There are multiple cases for which adding just a busy functionnality to the button would not suffice to cover app the application needs.
• we find it a bit hard to decide on the styling. what happens when you already have an icon? should it be replaced by a spinner? What about when the button grows in size to accomodate a the icon how would this work with design needs of end user.
• @ShimiSun feel free to add more i might have missed from our talk

Generally we not saying a blunt no, we are open for discussion but trying to be extra carefull before adding more props to the API interface!

Thanks once again for you ideas and contribution to the community 😃