Button

Button 使用户能够通过一次点击执行操作并做出选择。

Anatomy


import { Button } from '@nex-ui/react'

添加 loading 属性，可在 Button 内部显示一个加载指示器组件。

您还可以通过 spinner 属性自定义加载指示器组件。

通过设置 startIcon 或 endIcon 属性，向 Button 添加图标。

添加 IconOnly 属性，可显示一个仅图标而无文本的 Button。

Button 继承 as (默认为 'button') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Button 的内容。
className	ClassValue	-	用于根元素的 className。
ref	Ref	-	用于转发根元素。
as	ElementType	'button'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	Button Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Button Slots 的 props。
color	'blue'\|'orange'\|'yellow'\|'cyan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'blue'	Button 的颜色。
variant	'solid'\|'outlined'\|'ghost'\|'faded'	'solid'	Button 的外观样式。
size	'sm'\|'md'\|'lg'	'md'	Button 的大小。
radius	'sm'\|'md'\|'lg'\|'full'\|'none'	'md'	Button 的 BorderRadius。
disabled	boolean	false	Button 是否禁用。
loading	boolean	false	Button 是否处于加载状态。
fullWidth	boolean	false	Button 是否应占据其父元素的全部宽度。
iconOnly	boolean	false	Button 是否应具有相同的宽度和高度。
startIcon	ReactNode	-	放置在子元素之前的元素。
endIcon	ReactNode	-	放置在子元素之后的元素。
spinner	ReactNode	-	加载状态时的加载指示器。
spinnerPlacement	'start'\|'end'	'start'	加载指示器的位置。
disableRipple	boolean	false	是否禁用 Button 点击后的 Ripple 效果。
href	string	-	点击跳转的地址，指定此属性 button 的行为和 a 链接一致。
target	string	-	相当于 a 链接的 target 属性，href 存在时生效。

Slot Name	Class Name	Default Component	Description
startIcon	.nui-button-start-icon	'span'	Button 子元素之前图标的容器。
endIcon	.nui-button-end-icon	'span'	Button 子元素之后图标的容器。