按钮

查看源代码

使用户能够触发操作或事件，例如提交表单、打开对话框、取消操作或执行删除操作。

演示

import { Button } from "@resolid/react-ui";

export default function App() {
  return <Button>按钮</Button>;
}

用法

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

特点

  • 本机 HTML <button> 元素支持。
  • 通过 WAI ARIA Button 设计模式支持 <a> 和自定义元素类型。
  • 键盘事件支持 Space 和 Enter 键。

举例

外观

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

按钮有六种不同的颜色可供使用。通过传递 color 属性，可以选择使用 primary、secondary、success、warning、danger 或 neutral 中的任意一种。

import { Button } from "@resolid/react-ui";

export default function App() {
  const colors = ["primary", "secondary", "success", "warning", "danger", "neutral"];
  const variants = ["solid", "outline", "subtle", "soft", "ghost", "link"];

  return (
    <div className="flex flex-col gap-3">
      {colors.map((color) => (
        <div key={color} className="flex gap-3">
          {variants.map((variant) => (
            <Button key={`${color}-${variant}`} variant={variant} color={color}>
              按钮
            </Button>
          ))}
        </div>
      ))}
    </div>
  );
}

大小

通过传递 size 属性来更改按钮的大小。按钮支持 xs、sm、md、lg 和 xl 这些大小。

import { Button } from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex flex-row items-center gap-3">
      <Button size="xs">按钮</Button>
      <Button size="sm">按钮</Button>
      <Button>按钮</Button>
      <Button size="lg">按钮</Button>
      <Button size="xl">按钮</Button>
    </div>
  );
}

圆角

通过传递 radius 属性来更改按钮的圆角。

import { Button } from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex flex-row gap-3">
      <Button radius="none">按钮</Button>
      <Button radius={2}>按钮</Button>
      <Button>按钮</Button>
      <Button radius="lg">按钮</Button>
      <Button radius="full">按钮</Button>
    </div>
  );
}

图标

你可以在任何位置设置任何图标，还可以通过传递 iconOnly 属性显示不带文本的按钮。

import { Button } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className="flex flex-row gap-3">
      <Button>
        <SpriteIcon size="1.25em" className="me-1.5" name="sun" />
        亮色模式
      </Button>
      <Button variant="outline">
        <SpriteIcon size="1.25em" className="me-1.5" name="moon" />
        暗色模式
      </Button>
      <Button iconOnly>
        <SpriteIcon size="1.25em" name="home" />
      </Button>
      <Button iconOnly variant="outline" color="neutral">
        <SpriteIcon size="1.25em" name="github" />
      </Button>
    </div>
  );
}

加载中

可以通过传递 loading 属性显示按钮的加载中样式。

import { Button } from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex flex-row gap-3">
      <Button loading>加载中</Button>
      <Button color="neutral" loading>
        Loading
      </Button>
      <Button loading loadingText="加载中">
        Loading
      </Button>
      <Button variant="outline" color="neutral" loading>
        Loading
      </Button>
      <Button variant="outline" loading loadingText="加载中">
        Loading
      </Button>
    </div>
  );
}

按钮组

使用 ButtonGroup 将按钮分组在一起

import { Button, ButtonGroup } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-row gap-3">
        <ButtonGroup>
          <Button>按钮</Button>
          <Button iconOnly>
            <SpriteIcon name="menu" />
          </Button>
        </ButtonGroup>
        <ButtonGroup color="neutral">
          <Button variant="subtle">按钮</Button>
          <Button variant="outline" iconOnly>
            <SpriteIcon name="menu" />
          </Button>
        </ButtonGroup>
        <ButtonGroup color="neutral">
          <Button variant="subtle">黑体</Button>
          <Button variant="outline">斜体</Button>
          <Button variant="outline">下划线</Button>
          <Button variant="outline">删除线</Button>
        </ButtonGroup>
        <ButtonGroup color="neutral" disabled>
          <Button variant="subtle">按钮</Button>
          <Button variant="outline" iconOnly>
            <SpriteIcon name="menu" />
          </Button>
        </ButtonGroup>
      </div>
      <div className="flex flex-row gap-3">
        <ButtonGroup orientation="vertical">
          <Button>提交</Button>
          <Button>取消</Button>
        </ButtonGroup>
        <ButtonGroup variant="outline" orientation="vertical">
          <Button>提交</Button>
          <Button>取消</Button>
        </ButtonGroup>
        <ButtonGroup orientation="vertical" disabled>
          <Button>提交</Button>
          <Button>取消</Button>
        </ButtonGroup>
        <ButtonGroup variant="outline" orientation="vertical" disabled>
          <Button>提交</Button>
          <Button>取消</Button>
        </ButtonGroup>
      </div>
    </div>
  );
}

属性

Button

属性
size

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性
color

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"primary"必须false
属性
variant

外观

类型"solid" | "outline" | "subtle" | "soft" | "ghost" | "link"默认值"solid"必须false
属性
radius

圆角

类型"full" | "lg" | "md" | "none" | "sm" | "xl" | "xs" | number默认值"md"必须false
属性
disabled

是否禁用

类型boolean默认值false必须false
属性
active

是否激活

类型boolean默认值false必须false
属性
iconOnly

仅图标

类型boolean默认值false必须false
属性
loading

加载中

类型boolean默认值false必须false
属性
loadingText

加载文本

类型string默认值必须false
属性
noPadding

无内边距

类型boolean默认值false必须false
属性
spinner

加载器

类型ReactNode默认值Spinner必须false
属性
spinnerPlacement

加载器位置

类型"start" | "end"默认值"start"必须false

ButtonGroup

属性
size

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性
color

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"primary"必须false
属性
variant

外观

类型"solid" | "outline" | "subtle" | "soft" | "ghost" | "link"默认值"solid"必须false
属性
radius

圆角

类型"full" | "lg" | "md" | "none" | "sm" | "xl" | "xs" | number默认值"md"必须false
属性
orientation

方向

类型"horizontal" | "vertical"默认值"horizontal"必须false
属性
disabled

是否禁用

类型boolean默认值false必须false

建议更改此页面