按钮

按钮组件用于触发动作或事件，例如提交表单、打开对话框、取消操作或执行删除操作。

导入

import { Button, ButtonGroup } from "@resolid/react-ui";
  • Button: 具有自定义图标、加载指示器等功能的按钮组件。
  • ButtonGroup: 用于将相关动作的按钮分组在一起的组件，可以选择将它们一起对齐。

用法

颜色

外观

按钮有五种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、outline、soft、ghost 或 link 中的任意一种。

<Button>Solid</Button>
<Button variant={'outline'}>Outline</Button>
<Button variant={'soft'}>Soft</Button>
<Button variant={'ghost'}>Ghost</Button>
<Button variant={'link'}>Link</Button>

颜色

通过传递 color 属性来更改按钮的颜色。按钮支持 primary、success、warning、danger 和 neutral 这些颜色。

<Button>Primary</Button>
<Button color={'success'}>Success</Button>
<Button color={'warning'}>Warning</Button>
<Button color={'danger'}>Danger</Button>
<Button color={'neutral'}>Neutral</Button>

大小

按钮有五种可用的尺寸。通过传递 size 属性，可以选择使用 xs、sm、md、lg 或 xl 中的任意一种。

<Button size={'xs'}>XS</Button>
<Button size={'sm'}>SM</Button>
<Button>MD</Button>
<Button size={'lg'}>LG</Button>
<Button size={'xl'}>XL</Button>

圆角

按钮圆角可以设置为 false、xs、sm、lg、xl、full 以及数字

<Button radius={false}>按钮</Button>
<Button radius={'xs'}>按钮</Button>
<Button radius={'sm'}>按钮</Button>
<Button>按钮</Button>
<Button radius={'lg'}>按钮</Button>
<Button radius={'xl'}>按钮</Button>
<Button radius={'full'}>按钮</Button>
<Button radius={11}>按钮</Button>

图标

<Button>
  <SpriteIcon size={'sm'} className={'me-1.5'} name={'sun'} />
  亮色模式
</Button>
<Button variant={'outline'}>
  <SpriteIcon size={'sm'} className={'me-1.5'} name={'moon'} />
  暗色模式
</Button>
<Button variant={'light'}>
  菜单
  <SpriteIcon size={'sm'} className={'ms-1.5'} name={'menu'} />
</Button>
<Button square>
  <SpriteIcon size={'sm'} name={'setting'} />
</Button>
<Button square variant={'outline'} color={'neutral'}>
  <SpriteIcon size={'sm'} name={'dashboard'} />
</Button>
<Button square variant={'light'} color={'warning'}>
  <SpriteIcon size={'sm'} name={'logout'} />
</Button>
<Button square variant={'subtle'} color={'success'}>
  <SpriteIcon size={'sm'} name={'auto'} />
</Button>

加载状态

<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
<Button loading loadingText={'Loading'}>
  Loading
</Button>
<Button active>Active</Button>
<Button block>Full Width</Button>

按钮组

<ButtonGroup>
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup disabled>
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup>
  <Button>保存</Button>
  <Button variant="outline" square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup>
  <Button>保存</Button>
  <Button color={'neutral'} square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup variant="outline">
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup variant="light">
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup vertical>
  <Button>保存</Button>
  <Button color={'success'} square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup vertical variant="outline">
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>
<ButtonGroup vertical variant="light">
  <Button>保存</Button>
  <Button square>
    <SpriteIcon name={'plus'} size={'sm'} />
  </Button>
</ButtonGroup>

属性

按钮

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性variant类型"link" | "solid" | "outline" | "soft" | "ghost"默认值'solid'必须false
属性active类型boolean默认值false必须false
属性disabled类型boolean默认值false必须false
属性block类型boolean默认值false必须false
属性square类型boolean默认值false必须false
属性radius类型number | false | true | "xs" | "sm" | "lg" | "xl" | "full"默认值true必须false
属性padded类型boolean默认值true必须false
属性loading类型boolean默认值false必须false
属性loadingText类型string默认值''必须false
属性spinner类型Element默认值Spinner必须false
属性spinnerPlacement类型"start" | "end"默认值'start'必须false
属性asChild类型boolean默认值false必须false

按钮组

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性variant类型"link" | "solid" | "outline" | "soft" | "ghost"默认值'solid'必须false
属性vertical类型boolean默认值false必须false