Can't use custom color from theme in Button component

trying to use custom color from theme object in button component

That’s not working

<Button variantColor="newColor" size="md"> Button </Button>

But when using same color in Box component , it’s working:

<Box my={2} bg="newColor"> some box here </Box>

here is the example: https://codesandbox.io/s/vibrant-bush-76581

[segunadebayo]

Hi @ruslan-mystore,

I should have made it clearer in the docs but to use to variantColor with a custom color, you need to create a color object of this shape:

const brand = {
  100: "",
  200: "",
  500: "", 
  ...,
  900: ""
}

The reason is that Button has interactive styles (hover, action, disabled) and we pick color values from the object to make it work out of the box.

Use a tool like https://colorbox.io or https://smart-swatch.netlify.com to generate this quickly.

In the future, we’ll make this more declarative so you’ll be in control of this behavior.

[Prottoy2938]

@segunadebayo , I’ve followed what you’ve said, but still can’t seem to fix the warning and can’t use the color.

theme.tsx looks like this:

import { theme } from "@chakra-ui/core";

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: {
      100: "#CFD1FD",
      200: "#A7ABFB",
      300: "#8388F9",
      400: "#6268F8",
      500: "#444BF7",
      600: "#262EF6",
      700: "#0B14F5",
      800: "#0911DD",
      900: "#080FC7",
    },

    grey: {
      50: "#f0f0fa",
      100: "#d1d3e1",
      200: "#b3b6c9",
      300: "#9499b4",
      400: "#777c9f",
      500: "#5d6385",
      600: "#484d69",
      700: "#34374b",
      800: "#1e212e",
      900: "#080b14",
    },
  },
};

export default customTheme;

And I’m trying to use the grey.900 color in this button

 <Button
                isLoading={loginLoading.accountCreating}
                loadingText="Creating Account"
                variantColor="grey.900" //error here. Note that
                variant="outline"
                type="submit"
                height="43px"
                width="300px"
                border="2px"
                className={styles.submitBtn}
              >
                Create Account
              </Button>