I am currently building a component library for a project following given design specifications and therefore am extending the default button theme in a separate button.ts which contains something like this:

const solid: SystemStyleFunction = (props) => ({
  bg: mode("tealLight", "teal")(props),
  color: "bgDark",
  borderRadius: "20px",
  _active: {
    bg: mode("white", "bgDark")(props),
    color: mode("bgDark", "white")(props)
  },
  _disabled: {
    bg: "lightGrey",
    color: "grey"
  }
});

const Button : StyleConfig = {
  defaultProps: {
    size: "md"
  },
  variants: {
    solid: solid,
  }
};

export default Button;

Works like a charm so far.

Now the given design requires that an arrow is to be shown on hover to the right of the button's label.

Back in the days of hand-written (S)CSS, i would have just added a pseudo-element only visible on :hover – here, of course, i am now looking into adding _hover: { ... } to the above SystemStyleFunction-config.

According to the Chakra UI docs, showing an icon on a standard form button can easily be achieved via the rightIcon or leftIcon prop. I do have the icon component ready at hand, however:

The leftIcon and rightIcon prop values should be react elements NOT strings.

So how can the hover-only icon be achieved then ...

• can i use React.createElement(...) to define the element right there (or in the StyleConfig object at the end of my file)?
• can i convert my button.ts into a button.tsx and then add the icon-element in JSX-style syntax?
• is there an alternative way of setting the icon element (because the documentation says "should", not "must")
• or is this impossible to be done with my styled <Button> and a completely different approach is needed (if so, kindly advise)?