Add leftIcon and rightIcon as button theme properties

🚀 Feature request

I would like to create a variant of a button by setting the leftIcon and rightIcon properties in my theme. Somehow that doesn’t work.

🧱 Problem Statement / Justification

Without this, I’d be forced to create my own custom buttons, even though technically, they really are just buttons. Having my own button components just to enforce a particular style that is actually supported by just modifying some style properties on the component itself seems like an unnecessary limitation of the framework.

✅ Proposed solution or API

        secondary: {
          ...defaultTheme.components.Button.variants.link,
          color: "brown",
          fontSize: "26px",
          lineHeight: "29px",
          leftIcon: <LeftArrowIcon />,
        },

↩️ Alternatives

The alternative would be to create a component that behaves as a Chakra button, wrapping a normal button, setting the icon property on it directly.

📝 Additional Information

If I try it, I get this:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:202815:13)
    at useContext (http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:230235:21)
    at Styled(svg) (http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:31410:73)
    at runIfFn (http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:29697:85)
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20591:81
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20640:41
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20665:39
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20665:39
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20665:39
    at http://localhost:6006/vendors~main.a61f7bc8fa4cc017269d.bundle.js:20665:39

[matthewrose]

I propose that this feature request get revisited, even if it means refactoring how an icon gets associated with the button component.

Having the icon change based on button state or variant is a fairly common thing developers need to do, and in my opinion should be supported via a configuration or theme of some kind. (surely it’s even more common than toggling between a dark and light theme?)

[abhinav-bhateja]

will this ever happen?