Skip to Content
文档

按钮

用于触发操作或事件

SourceStorybookRecipe

用法

¥Usage

import { Button, ButtonGroup } from "@chakra-ui/react"
<Button>Click me</Button>

示例

¥Examples

尺寸

¥Sizes

使用 size 属性更改按钮的大小。

¥Use the size prop to change the size of the button.

变量

¥Variants

使用 variant 属性更改按钮的视觉样式。

¥Use the variant prop to change the visual style of the Button.

图标

¥Icon

在按钮中使用图标

¥Use icons within a button

颜色

¥Color

使用 colorPalette 属性更改按钮的颜色

¥Use the colorPalette prop to change the color of the button

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

已禁用

¥Disabled

使用 disabled 属性禁用按钮。

¥Use the disabled prop to disable the button.

已禁用链接

¥Disabled Link

disabled 属性与链接一起使用时,你需要阻止链接的默认行为并添加 data-disabled 属性。

¥When using the disabled prop with a link, you need to prevent the default behavior of the link and add the data-disabled attribute.

Button

加载中

¥Loading

loadingloadingText 属性传递给 Button 组件,以显示加载旋转器并添加加载文本。

¥Pass the loading and loadingText props to the Button component to show a loading spinner and add a loading text.

以下是如何在保持按钮宽度不变的情况下切换按钮的加载状态的示例。

¥Here's an example of how to toggle the loading state of a button while keeping the width of the button the same.

旋转器位置

¥Spinner Placement

使用 spinnerPlacement 属性更改旋转器的位置。

¥Use the spinnerPlacement prop to change the placement of the spinner.

自定义旋转器

¥Custom Spinner

使用 spinner 属性更改旋转器。

¥Use the spinner prop to change the spinner.

¥Group

使用 ButtonGroup 组件将按钮分组。此组件允许你将常用配方属性传递给内部按钮。

¥Use the ButtonGroup component to group buttons together. This component allows you pass common recipe properties to inner buttons.

要刷新按钮,请传递 attached 属性。

¥To flush the buttons, pass the attached prop.

半径

¥Radius

使用 rounded 属性更改按钮的半径。

¥Use the rounded prop to change the radius of the button.

Semantic Radius

Core Radius

作为链接

¥As Link

使用 asChild 属性将按钮渲染为链接。

¥Use the asChild prop to render a button as a link.

参考

¥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

PropDefaultType
spinnerPlacement 'start'
'start' | 'end' | undefined

The placement of the spinner

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

size 'md'
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

The size of the component

variant 'solid'
'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'

The variant of the component

loading
boolean | undefined

If `true`, the button will show a loading spinner.

loadingText
React.ReactNode | undefined

The text to show while loading.

spinner
React.ReactNode | undefined

The spinner to show while loading.

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

文本

Next

关闭按钮