按钮 - Twenty Documentation

在应用程序中使用的按钮和按钮组的列表。

按钮

用法
属性

import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

属性	类型	描述
className	字符串	用于额外样式的可选类名
图标	`React.ComponentType`	按钮内显示的可选图标组件
标题	string	按钮的文本内容
fullWidth	布尔值	定义按钮是否应占据其容器的整个宽度
变体	string	按钮的视觉样式变体。选项包括 `primary`，`secondary` 和 `tertiary`
大小	字符串	按钮的大小。有两个选项：`small` 和 `medium`
职位	string	按钮与其同类的位置。选项包括: `standalone`，`left`，`right` 和 `middle`
加权：	string	按钮的强调颜色。选项包括: `default`，`blue` 和 `danger`
即将推出	布尔值	指示按钮是否标记为”即将推出”（例如针对即将推出的功能）
disabled	布尔值	指定按钮是否被禁用
聚焦	布尔值	确定按钮是否具有焦点
onClick	函数	用户点击按钮时触发的回调函数

按钮组

用法
属性

import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
  return (
    <ButtonGroup variant="primary" size="large" accent="blue" className>
      <Button
        className
        Icon={null}
        title="Button 1"
        fullWidth={false}
        variant="primary"
        size="medium"
        position="standalone"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 2"
        fullWidth={false}
        variant="secondary"
        size="medium"
        position="left"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 3"
        fullWidth={false}
        variant="tertiary"
        size="medium"
        position="right"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
    </ButtonGroup>
  );
};

属性	类型	描述
变体	字符串	组内按钮的视觉样式变体。选项包括 `primary`，`secondary` 和 `tertiary`
大小	字符串	组内按钮的大小。有两个选项：`中等` 和 `small`
加权：	字符串	组内按钮的强调颜色。选项包括 `default`，`blue` 和 `danger`
className	string	用于额外样式的可选类名
子元素	ReactNode	一组代表组内各个按钮的 React 元素

浮动按钮

用法
属性

import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};

属性	类型	描述
className	string	用于附加样式的可选名称
图标	`React.ComponentType`	按钮内显示的可选图标组件
标题	字符串	按钮的文本内容
大小	字符串	按钮的大小。有两个选项：`small` 和 `medium`
职位	string	按钮与其同类的位置。选项包括: `standalone`，`left`，`middle`，`right`
苹果阴影	布尔值	确定是否对按钮应用阴影
苹果模糊	布尔值	确定是否对按钮应用模糊效果
disabled	布尔值	确定按钮是否被禁用
聚焦	布尔值	指示按钮是否具有焦点

浮动按钮组

用法
属性

import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};

属性	类型	描述	默认
大小	字符串	按钮的大小。有两个选项：`small` 和 `medium`	小的
子元素	ReactNode	一组代表组内各个按钮的 React 元素

浮动图标按钮

用法
属性

import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};

属性	类型	描述
className	string	用于附加样式的可选名称
图标	`React.ComponentType`	按钮内显示的可选图标组件
大小	string	按钮的大小。有两个选项：`small` 和 `medium`
职位	string	按钮与其同类的位置。选项包括: `standalone`，`left`，`right`，和 `middle`
苹果阴影	布尔值	确定是否对按钮应用阴影
苹果模糊	布尔值	确定是否对按钮应用模糊效果
disabled	布尔值	确定按钮是否被禁用
聚焦	布尔值	指示按钮是否具有焦点
onClick	函数	用户点击按钮时触发的回调函数
已启用	布尔值	确定按钮是否处于活动状态

浮动图标按钮组

用法
属性

import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

属性	类型	描述
className	string	用于附加样式的可选名称
大小	字符串	按钮的大小。有两个选项：`small` 和 `medium`
iconButtons	数组	一组对象，每个对象代表组中的一个图标按钮。每个对象应包含要在按钮中显示的图标组件，用户点击按钮时要调用的函数，以及按钮是否应处于活动状态。

亮色按钮

用法
属性

import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};

属性	类型	描述
className	string	用于附加样式的可选名称
图标	`React.ReactNode`	您想在按钮中显示的图标
标题	string	按钮的文本内容
加权：	string	按钮的强调颜色。选项包括：`secondary` 和 `tertiary`
活跃	布尔值	确定按钮是否处于活动状态
disabled	布尔值	确定按钮是否被禁用
聚焦	布尔值	指示按钮是否具有焦点
onClick	function	用户点击按钮时触发的回调函数

亮色图标按钮

用法
属性

import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

属性	类型	描述
className	string	用于附加样式的可选名称
测试ID	string	按钮的测试标识
图标	`React.ComponentType`	按钮内显示的可选图标组件
标题	字符串	按钮的文本内容
大小	字符串	按钮的大小。有两个选项：`small` 和 `medium`
加权：	字符串	按钮的强调颜色。选项包括：`secondary` 和 `tertiary`
活跃	布尔值	确定按钮是否处于活动状态
disabled	布尔值	确定按钮是否被禁用
聚焦	布尔值	指示按钮是否具有焦点
onClick	函数	用户点击按钮时触发的回调函数

主要按钮

用法
属性

import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};

属性	类型	描述
标题	字符串	按钮的文本内容
fullWidth	布尔值	定义按钮是否应占据其容器的整个宽度
变体	字符串	按钮的视觉样式变体。选项包括 `primary` 和 `secondary`
即将推出	布尔值	指示按钮是否标记为”即将推出”（例如针对即将推出的功能）
图标	`React.ComponentType`	按钮内显示的可选图标组件
React “按钮” props	`React.ComponentProps<'button'>`	支持所有标准 HTML 按钮属性

圆形图标按钮

用法
属性

import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};

属性	类型	描述
图标	`React.ComponentType`
React “按钮” props	`React.ButtonHTMLAttributes<HTMLButtonElement>`

Welcome

Core Concepts

按钮

按钮

按钮组

浮动按钮

浮动按钮组

浮动图标按钮

浮动图标按钮组

亮色按钮

亮色图标按钮

主要按钮

圆形图标按钮

​按钮

​按钮组

​浮动按钮

​浮动按钮组

​浮动图标按钮

​浮动图标按钮组

​亮色按钮

​亮色图标按钮

​主要按钮

​圆形图标按钮

按钮

按钮组

浮动按钮

浮动按钮组

浮动图标按钮

浮动图标按钮组

亮色按钮

亮色图标按钮

主要按钮

圆形图标按钮