Button

Usage

jsx

import { Button, ButtonGroup } from "@chakra-ui/react"

jsx

<Button>Click me</Button>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change the visual style of the Button.

Icon

Use icons within a button

Color

Use the colorPalette prop to change the color of the button

Disabled

Use the disabled prop to disable the button.

Disabled Link

When using the disabled prop with a link, you need to prevent the default behavior of the link and add the data-disabled attribute.

Loading

Pass the loading and loadingText props to the Button component to show a loading spinner and add a loading text.

Here's an example of how to toggle the loading state of a button while keeping the width of the button the same.

Spinner Placement

Use the spinnerPlacement prop to change the placement of the spinner.

Custom Spinner

Use the spinner prop to change the spinner.

Group

Use the ButtonGroup component to group buttons together. This component allows you pass common recipe properties to inner buttons.

To flush the buttons, pass the attached prop.

Combine a Button and Menu with an attached Group to create a split button with a dropdown menu.

Responsive Size

Use the object syntax on the size prop to make the button size responsive.

Radius

Use the rounded prop to change the radius of the button.

As Link

Use the asChild prop to render a button as a link.

Ref

Here's how to access the underlying element reference

tsx

const Demo = () => {
  const ref = useRef<HTMLButtonElement | null>(null)
  return <Button ref={ref}>Click me</Button>
}

Customization

:::info

After customizing the recipe, run the CLI typegen command to regenerate the types. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

bash

npx @chakra-ui/cli typegen

:::

Adding a new variant

Use the defineRecipe function to add a new variant to the button. In this example, we add a pill variant that respects the colorPalette prop.

tsx

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  variants: {
    variant: {
      pill: {
        borderRadius: "full",
        px: "6",
        bg: "colorPalette.solid",
        color: "colorPalette.contrast",
        _hover: {
          bg: "colorPalette.solid/90",
        },
      },
    },
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

Then use the pill variant in your button:

tsx

<Button variant="pill" colorPalette="blue">
  Pill Button
</Button>

Adding a new size

Use the defineRecipe function to add a new size to the button.

tsx

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  variants: {
    size: {
      xxl: {
        h: "16",
        minW: "16",
        textStyle: "xl",
        px: "8",
      },
    },
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

Then use the xxl size in your button:

tsx

<Button size="xxl">XXL Button</Button>

Changing the default variant

Use the defaultVariants property to change the default size or variant.

tsx

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  defaultVariants: {
    size: "lg",
    variant: "outline",
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

Props