Button

Used to trigger an action or event

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

const Demo = () => {
  return <Button>Button</Button>
}

Usage

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

<Button>Click me</Button>

Examples

Sizes

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

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

const Demo = () => {
  return (
    <HStack wrap="wrap" gap="6">
      <Button size="xs">Button (xs)</Button>
      <Button size="sm">Button (sm)</Button>
      <Button size="md">Button (md)</Button>
      <Button size="lg">Button (lg)</Button>
      <Button size="xl">Button (xl)</Button>
    </HStack>
  )
}

Variants

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

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

const Demo = () => {
  return (
    <HStack wrap="wrap" gap="6">
      <Button variant="solid">Solid</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="surface">Surface</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="plain">Plain</Button>
    </HStack>
  )
}

Icon

Use icons within a button

import { Button, HStack } from "@chakra-ui/react"
import { RiArrowRightLine, RiMailLine } from "react-icons/ri"

const Demo = () => {
  return (
    <HStack>
      <Button colorPalette="teal" variant="solid">
        <RiMailLine /> Email
      </Button>
      <Button colorPalette="teal" variant="outline">
        Call us <RiArrowRightLine />
      </Button>
    </HStack>
  )
}

Color

Use the colorPalette prop to change the color of the button

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

import { Button, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack align="center" key={colorPalette} direction="row" gap="10">
          <Text minW="8ch">{colorPalette}</Text>
          <Button colorPalette={colorPalette}>Button</Button>
          <Button colorPalette={colorPalette} variant="outline">
            Button
          </Button>
          <Button colorPalette={colorPalette} variant="surface">
            Button
          </Button>
          <Button colorPalette={colorPalette} variant="subtle">
            Button
          </Button>
        </Stack>
      ))}
    </Stack>
  )
}

Disabled

Use the disabled prop to disable the button.

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

const Demo = () => {
  return <Button disabled>Button</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.

Button

"use client"

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

const Demo = () => {
  return (
    <Button asChild>
      <a href="#" data-disabled="" onClick={(e) => e.preventDefault()}>
        Button
      </a>
    </Button>
  )
}

Loading

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

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

const Demo = () => {
  return (
    <Stack direction="row" gap="4" align="center">
      <Button loading>Click me</Button>
      <Button loading loadingText="Saving...">
        Click me
      </Button>
    </Stack>
  )
}

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

"use client"

import { Button, VStack } from "@chakra-ui/react"
import { Checkbox } from "@/components/ui/checkbox"
import { useState } from "react"

const Demo = () => {
  const [loading, setLoading] = useState(false)
  return (
    <VStack gap="4">
      <Button loading={loading} onClick={() => setLoading(!loading)}>
        Click me
      </Button>
      <Checkbox
        size="sm"
        checked={loading}
        onCheckedChange={() => setLoading(!loading)}
      >
        Loading
      </Checkbox>
    </VStack>
  )
}

Spinner Placement

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

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

const Demo = () => {
  return (
    <ButtonGroup colorPalette="teal">
      <Button loading loadingText="Loading" spinnerPlacement="start">
        Submit
      </Button>
      <Button loading loadingText="Loading" spinnerPlacement="end">
        Continue
      </Button>
    </ButtonGroup>
  )
}

Custom Spinner

Use the spinner prop to change the spinner.

import { Button } from "@chakra-ui/react"
import { BeatLoader } from "react-spinners"

const Demo = () => {
  return (
    <Button
      loading
      colorPalette="blue"
      spinner={<BeatLoader size={8} color="white" />}
    >
      Click me
    </Button>
  )
}

Group

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

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

const Demo = () => {
  return (
    <ButtonGroup size="sm" variant="outline">
      <Button colorPalette="blue">Save</Button>
      <Button>Cancel</Button>
    </ButtonGroup>
  )
}

To flush the buttons, pass the attached prop.

import { Button, ButtonGroup, IconButton } from "@chakra-ui/react"
import { LuChevronDown } from "react-icons/lu"

const Demo = () => {
  return (
    <ButtonGroup size="sm" variant="outline" attached>
      <Button variant="outline">Button</Button>
      <IconButton variant="outline">
        <LuChevronDown />
      </IconButton>
    </ButtonGroup>
  )
}

Radius

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

Semantic Radius

Core Radius

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

const Demo = () => {
  return (
    <Stack gap="8">
      <Stack>
        <Text textStyle="sm">Semantic Radius</Text>
        <ButtonGroup variant="subtle">
          <Button rounded="l1">Rounded l1</Button>
          <Button rounded="l2">Rounded l2</Button>
          <Button rounded="l3">Rounded l3</Button>
        </ButtonGroup>
      </Stack>

      <Stack>
        <Text textStyle="sm">Core Radius</Text>
        <ButtonGroup variant="subtle">
          <Button rounded="sm">Rounded sm</Button>
          <Button rounded="md">Rounded md</Button>
          <Button rounded="lg">Rounded lg</Button>
          <Button rounded="xl">Rounded xl</Button>
          <Button rounded="2xl">Rounded 2xl</Button>
          <Button rounded="full">Rounded full</Button>
        </ButtonGroup>
      </Stack>
    </Stack>
  )
}

As Link

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

Button

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

const Demo = () => {
  return (
    <Button asChild>
      <a href="#">Button</a>
    </Button>
  )
}

Ref

Here's how to access the underlying element reference

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

Props

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`variant`	`'solid'`	`'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` The variant of the component
`loading`		`boolean`
`loadingText`		`React.ReactNode`

Breadcrumb

Card

Button

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage