[Chakra UI]カスタムサイズのボタンを作ってみた

カスタムサイズのボタンの作り方

公式ドキュメント

公式ドキュメント

基本的に公式ドキュメント通りにすると作成できる。

前提

Next.jsで作成する前提とする。

themeの作成

構造

今回、必要な部分のみを抽出

your_project
├── pages
│   └── _app.tsx
├── theme
│   ├── components
│   │   └── button.ts
│   └── index.ts
...

作成するファイル

index.ts

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

import Button from './components/button'

const theme = extendTheme({
  components: {
    Button,
  },
})

export default theme

今回はxlと2xlサイズを作成する。

button.ts

const Button = {
  sizes: {
    xl: {
      h: '56px',
      fontSize: 'lg',
      px: '32px',
    },
    '2xl': {
      h: '64px',
      fontSize: '2xl',
      px: '36px',
    },
  },
}

export default Button

themeの適用

_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import theme from '@/theme'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

使用方法

sizeに作成したxlや2xlを指定すれば良い。

<Button
  size={{ base: 'md', sm: 'xl', md: '2xl' }}
  boxShadow="xl"
  px={6}
  colorScheme={'green'}
  bg={'green.400'}
  _hover={{ bg: 'green.500' }}
>
  ボタン
</Button>