> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 按钮

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/views/filter.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=457ca3d2bad4bdf406ab6b01f22e0bf2" alt="标题" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

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

## 按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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")}
        />
      );
    };
    ```
  </Tab>

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

## 按钮组

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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>
      );
    };

    ```
  </Tab>

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

## 浮动按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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}
        />
      );
    };
    ```
  </Tab>

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

## 浮动按钮组

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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>
      );
    };
    ```
  </Tab>

  <Tab title="属性">
    | 属性  | 类型        | 描述                              | 默认 |
    | --- | --------- | ------------------------------- | -- |
    | 大小  | 字符串       | 按钮的大小。 有两个选项：`small` 和 `medium` | 小的 |
    | 子元素 | ReactNode | 一组代表组内各个按钮的 React 元素            |    |
  </Tab>
</Tabs>

## 浮动图标按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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}
        />
      );
    };
    ```
  </Tab>

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

## 浮动图标按钮组

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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} />
      );
    };

    ```
  </Tab>

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

## 亮色按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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')}
      />;
    };
    ```
  </Tab>

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

## 亮色图标按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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")}
        />
      );
    };
    ```
  </Tab>

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

## 主要按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    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}
        />
      );
    };
    ```
  </Tab>

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

## 圆形图标按钮

<Tabs>
  <Tab title="用法">
    ```jsx theme={null}
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

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

  <Tab title="属性">
    | 属性               | 类型                                              | 描述 |
    | ---------------- | ----------------------------------------------- | -- |
    | 图标               | `React.ComponentType`                           |    |
    | React "按钮" props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |    |
  </Tab>
</Tabs>