按钮

查看源代码

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

导入

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

用法

颜色

演示

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

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

举例

外观

按钮有六种不同的变体可供使用。通过传递 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 flex-row items-center gap-3"}>
          {variants.map((variant) => (
            <Button key={`${color}-${variant}`} variant={variant} color={color}>
              Button
            </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>
      <Button size={"sm"}>Button</Button>
      <Button>Button</Button>
      <Button size={"lg"}>Button</Button>
      <Button size={"xl"}>Button</Button>
    </div>
  );
}

圆角

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

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Button radius={false}>Button</Button>
      <Button radius={2}>Button</Button>
      <Button>Button</Button>
      <Button radius={12}>Button</Button>
      <Button radius={"full"}>Button</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 items-center gap-3"}>
      <Button>
        <SpriteIcon size={"1.25em"} className={"me-1.5"} name={"sun"} />
        Light Mode
      </Button>
      <Button variant={"outline"}>
        <SpriteIcon size={"1.25em"} className={"me-1.5"} name={"moon"} />
        Dark Mode
      </Button>
      <Button iconOnly>
        <SpriteIcon size={"1.25em"} name={"home"} />
      </Button>
      <Button iconOnly variant={"outline"} color={"neutral"}>
        <SpriteIcon size={"1.25em"} name={"github"} />
      </Button>
    </div>
  );
}

禁用

可以通过传递 disabled 属性显示按钮的禁用样式。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Button disabled>Disabled</Button>
      <Button variant={"outline"} disabled>
        Disabled
      </Button>
      <Button variant={"subtle"} disabled>
        Disabled
      </Button>
      <Button variant={"soft"} disabled>
        Disabled
      </Button>
      <Button variant={"ghost"} disabled>
        Disabled
      </Button>
      <Button variant={"link"} disabled>
        Disabled
      </Button>
    </div>
  );
}

激活

可以通过传递 active 属性显示按钮的激活样式。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Button active>Active</Button>
      <Button variant={"outline"} active>
        Active
      </Button>
      <Button variant={"subtle"} active>
        Active
      </Button>
      <Button variant={"soft"} active>
        Active
      </Button>
      <Button variant={"ghost"} active>
        Active
      </Button>
      <Button variant={"link"} active>
        Active
      </Button>
    </div>
  );
}

加载中

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

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

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

全宽度

可以通过传递 fullWidth 属性显示按钮的禁用样式。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Button fullWidth>Full width button</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 gap-3"}>
      <div className={"flex flex-row gap-3"}>
        <ButtonGroup>
          <Button>Button</Button>
          <Button iconOnly>
            <SpriteIcon name={"menu"} />
          </Button>
        </ButtonGroup>
        <ButtonGroup color={"neutral"}>
          <Button variant="subtle">Button</Button>
          <Button variant="outline" iconOnly>
            <SpriteIcon name={"menu"} />
          </Button>
        </ButtonGroup>
        <ButtonGroup color={"neutral"}>
          <Button variant="subtle">One</Button>
          <Button variant="outline">Two</Button>
          <Button variant="outline">Three</Button>
          <Button variant="outline">Four</Button>
        </ButtonGroup>
        <ButtonGroup color={"neutral"} disabled>
          <Button variant="subtle">Button</Button>
          <Button variant="outline" iconOnly>
            <SpriteIcon name={"menu"} />
          </Button>
        </ButtonGroup>
      </div>
      <div className={"flex flex-row gap-3"}>
        <ButtonGroup orientation={"vertical"}>
          <Button>Submit</Button>
          <Button>Cancel</Button>
        </ButtonGroup>
        <ButtonGroup variant="outline" orientation={"vertical"}>
          <Button>Submit</Button>
          <Button>Cancel</Button>
        </ButtonGroup>
        <ButtonGroup orientation={"vertical"} disabled>
          <Button>Submit</Button>
          <Button>Cancel</Button>
        </ButtonGroup>
        <ButtonGroup variant="outline" orientation={"vertical"} disabled>
          <Button>Submit</Button>
          <Button>Cancel</Button>
        </ButtonGroup>
      </div>
    </div>
  );
}

属性

Button

属性variant简介

外观

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

颜色

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

大小

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

按钮圆角

类型number | boolean | "full"默认值true必须false
属性disabled简介

是否禁用

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

是否激活

类型boolean默认值false必须false
属性fullWidth简介

全宽度

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

仅图标

类型boolean默认值false必须false
属性hasPadding简介

是否有内边距

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

加载中

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

加载文本

类型string默认值-必须false
属性spinner简介

加载器

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

加载器位置

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

ButtonGroup

属性variant简介

外观

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

颜色

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

大小

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

按钮圆角

类型number | boolean | "full"默认值true必须false
属性disabled简介

是否禁用

类型boolean默认值false必须false
属性orientation简介

布局方向

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

建议更改此页面