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.
"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.
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 |