Customized @chakra-ui/react theme. https://chakra-ui.com/docs/theming/customize-theme

theme.js

module.exports = {
  components: {
    Button: {
      // 1. We can update the base styles
      baseStyle: {
        fontWeight: "bold", // Normally, it is "semibold"
      },
      // 2. We can add a new button size or extend existing
      sizes: {
        xs: {
          h: "80px",
          minW: "80px",
          fontSize: "6xl",
        },
        xl: {
          h: "56px",
          fontSize: "lg",
          px: "32px",
        },
      },
      // 3. We can add a new visual variant
      variants: {
        "with-shadow": {
          bg: "red.400",
          boxShadow: "0 0 2px 2px #efdfde",
        },
        // 4. We can override existing variants
        solid: (props) => ({
          bg: props.colorMode === "dark" ? "red.300" : "red.500",
        }),
      },
    },
  },
}

module.exports = {
  components: {
    Button: {
      sizes: {
        md: {
          fontSize: "xl",
          p: "32px",
        },
      },
    },
  },
}