Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Button

Used to trigger an action or event

SourceStorybookRecipe

Setup

If you don't already have the snippet, run the following command to add the button snippet

chakra snippet add button

The snippet includes enhances the Button with loading and loadingText props.

Usage

import { Button } from "@/components/ui/button"
<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

Loading

Use the loading and loadingText prop to show a loading spinner

Group

Use the Group component to group buttons together

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