[Button] `variantColor` does not work with `COLOR_NAME.600`

I want to set Button’s variantColor to blue.600 (from the default theme):

<Button m={2} variantColor="blue.600" variant="solid">
	LinkedIn
</Button>

Unfortunately, it doesn’t fully render the button (no text, color, shape; only on hover text underline is visible). When I use variantColor="blue" it works correctly:

It also doesn’t work with other colors, ex. red.300.

[lee-reinhardt]

@xxczaki If you read Segun’s answer, he explains why you can’t pass a plain color, or even theme-config color like blue.600 to the variantColor prop. The button component has behavior that relies on using more than one value from the theme variant color specified source.

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.

You can work around this by making your own entry in the theme colors that satisfies all the numbers, or override styles via _active, _hover, etc. props.

[sethburtonhall]

I thought it would be helpful to share this code sandbox for anyone with the same issue.

Thanks @dodas !!