Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Button

Used to trigger an action or event

SourceStorybookRecipe

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.

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

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

Disabled

Use the disabled prop to disable the button.

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

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.

Radius

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

Semantic Radius

Core Radius

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

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

PropDefaultType
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

Previous

Breadcrumb

Next

Card