import { Button } from "@chakra-ui/react"
const Demo = () => {
return <Button>Button</Button>
}
用法
import { Button, ButtonGroup } from "@chakra-ui/react"<Button>Click me</Button>示例
尺寸
使用 size 属性来改变按钮的尺寸。
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>
)
}
变体
使用 variant 属性来改变按钮的视觉样式。
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>
)
}
图标
在按钮中使用图标
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>
)
}
颜色
使用 colorPalette 属性来改变按钮的颜色
灰色
红色
绿色
蓝色
蓝绿色
粉色
紫色
青色
橙色
黄色
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 属性来禁用按钮。
import { Button } from "@chakra-ui/react"
const Demo = () => {
return <Button disabled>Button</Button>
}
禁用链接
当在链接上使用 disabled 属性时，你需要阻止链接的默认行为并添加 data-disabled 属性。
"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 和 loadingText 属性传递给 Button 组件，以显示加载指示器并添加加载文本。
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>
)
}
这是一个示例，说明如何在保持按钮宽度不变的情况下切换按钮的加载状态。
"use client"
import { Button, Checkbox, VStack } from "@chakra-ui/react"
import { useState } from "react"
import { MdAdsClick } from "react-icons/md"
const Demo = () => {
const [loading, setLoading] = useState(false)
return (
<VStack gap="4">
<Button loading={loading} onClick={() => setLoading(!loading)}>
<MdAdsClick /> Click me
</Button>
<Checkbox.Root
size="sm"
checked={loading}
onCheckedChange={() => setLoading(!loading)}
>
<Checkbox.HiddenInput />
<Checkbox.Control />
<Checkbox.Label>Loading</Checkbox.Label>
</Checkbox.Root>
</VStack>
)
}
加载指示器位置
使用 spinnerPlacement 属性来改变加载指示器的位置。
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>
)
}
自定义加载指示器
使用 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>
)
}
分组
使用 ButtonGroup 组件将按钮组合在一起。该组件允许您将通用配方属性传递给内部按钮。
import { Button, ButtonGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<ButtonGroup size="sm" variant="outline">
<Button colorPalette="blue">Save</Button>
<Button>Cancel</Button>
</ButtonGroup>
)
}
要使按钮紧密连接，请传递 attached 属性。
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>
)
}
圆角
使用 rounded 属性来改变按钮的圆角。
语义圆角
核心圆角
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>
)
}
作为链接
使用 asChild 属性将按钮渲染为链接。
import { Button } from "@chakra-ui/react"
const Demo = () => {
return (
<Button asChild>
<a href="#">Button</a>
</Button>
)
}
引用
以下是访问底层元素引用的方法
const Demo = () => {
const ref = useRef<HTMLButtonElement | null>(null)
return <Button ref={ref}>Click me</Button>
}属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
size | 'md' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'组件的尺寸 |
variant | 'solid' | 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'组件的变体 |
loading | boolean | |
loadingText | React.ReactNode |