How to remove Chakra UI blue outline on focus

The simplest method is to set globally in your theme.js:

const theme = extendTheme({
  ...
  components: {
    ...
    Button: {
      baseStyle: {
        _focus: {
          boxShadow: 'none',
        }
      }
    }
    ...

Then import the theme in your _app.js:

import { ChakraProvider } from '@chakra-ui/react'

import theme from '../theme/theme'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

The common mistake is to think that the blue box is an outline but in fact it's a box shadow.