'how can I override the Chakra-UI button theme when I am in an 'isLoading' state?

This is my current override which works fine, but when I pass an isLoading prop, the theme is far too light. any help gratefully received! :)

solid: {
      bgGradient: "linear(to-r, primary.600, primary.500)",
      color: "white",
      _active: {},
      _hover: {
        transform: "scale(0.98)",
        bgGradient: "linear(to-r, primary.500, primary.400)",
      },
      _focus: {},
    },
buttonchakra


Solution 1:[1]

Use the _loading key and set opacity to 1

solid: {
      bgGradient: "linear(to-r, primary.600, primary.500)",
      color: "white",
      _active: {},
      _hover: {
        transform: "scale(0.98)",
        bgGradient: "linear(to-r, primary.500, primary.400)",
      },
      _focus: {},
      _loading: { opacity: 1 }
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lanxion

Related Questions