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
chakra 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 |