import { Button } from "@chakra-ui/react"
const Demo = () => {
return <Button>Button</Button>
}
Setup
If you don't already have the snippet, run the following command to add the
button snippet
npx @chakra-ui/cli snippet add buttonThe 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.
import { HStack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
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 { HStack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
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 { HStack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
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 { Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { Button } from "@/components/ui/button"
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>
)
}
Loading
Use the loading and loadingText prop to show a loading spinner
import { Stack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
const Demo = () => {
return (
<Stack direction="row" gap="4" align="center">
<Button loading>Click me</Button>
<Button loading loadingText="Saving...">
Click me
</Button>
</Stack>
)
}
Group
Use the Group component to group buttons together
import { Group, IconButton } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import { LuChevronDown } from "react-icons/lu"
const Demo = () => {
return (
<Group attached>
<Button variant="outline" size="sm">
Button
</Button>
<IconButton variant="outline" size="sm">
<LuChevronDown />
</IconButton>
</Group>
)
}
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 |