> ## 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.

# Buttons

<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="Header" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

A list of buttons and button groups used throughout the app.

## Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props     | Type                  | Description                                                                                                          |
    | --------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
    | className | string                | Optional class name for additional styling                                                                           |
    | Icon      | `React.ComponentType` | An optional icon component that's displayed within the button                                                        |
    | title     | string                | The text content of the button                                                                                       |
    | fullWidth | boolean               | Defines whether the button should span the whole width of its container                                              |
    | variant   | string                | The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`                       |
    | size      | string                | The size of the button. Has two options: `small` and `medium`                                                        |
    | position  | string                | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
    | accent    | string                | The accent color of the button. Options include: `default`, `blue`, and `danger`                                     |
    | soon      | boolean               | Indicates if the button is marked as "soon" (such as for upcoming features)                                          |
    | disabled  | boolean               | Specifies whether the button is disabled or not                                                                      |
    | focus     | boolean               | Determines if the button has focus                                                                                   |
    | onClick   | function              | A callback function that triggers when the user clicks on the button                                                 |
  </Tab>
</Tabs>

## Button Group

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props     | Type      | Description                                                                                                      |
    | --------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
    | variant   | string    | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
    | size      | string    | The size of the buttons within the group. Has two options: `medium` and `small`                                  |
    | accent    | string    | The accent color of the buttons within the group. Options include `default`, `blue` and `danger`                 |
    | className | string    | Optional class name for additional styling                                                                       |
    | children  | ReactNode | An array of React elements representing the individual buttons within the group                                  |
  </Tab>
</Tabs>

## Floating Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props       | Type                  | Description                                                                                                      |
    | ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
    | className   | string                | Optional name for additional styling                                                                             |
    | Icon        | `React.ComponentType` | An optional icon component that's displayed within the button                                                    |
    | title       | string                | The text content of the button                                                                                   |
    | size        | string                | The size of the button. Has two options: `small` and `medium`                                                    |
    | position    | string                | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right` |
    | applyShadow | boolean               | Determines whether to apply shadow to a button                                                                   |
    | applyBlur   | boolean               | Determines whether to apply a blur effect to the button                                                          |
    | disabled    | boolean               | Determines whether the button is disabled                                                                        |
    | focus       | boolean               | Indicates if the button has focus                                                                                |
  </Tab>
</Tabs>

## Floating Button Group

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props    | Type      | Description                                                                     | Default |
    | -------- | --------- | ------------------------------------------------------------------------------- | ------- |
    | size     | string    | The size of the button. Has two options: `small` and `medium`                   | small   |
    | children | ReactNode | An array of React elements representing the individual buttons within the group |         |
  </Tab>
</Tabs>

## Floating Icon Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props       | Type                  | Description                                                                                                          |
    | ----------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
    | className   | string                | Optional name for additional styling                                                                                 |
    | Icon        | `React.ComponentType` | An optional icon component that's displayed within the button                                                        |
    | size        | string                | The size of the button. Has two options: `small` and `medium`                                                        |
    | position    | string                | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
    | applyShadow | boolean               | Determines whether to apply shadow to a button                                                                       |
    | applyBlur   | boolean               | Determines whether to apply a blur effect to the button                                                              |
    | disabled    | boolean               | Determines whether the button is disabled                                                                            |
    | focus       | boolean               | Indicates if the button has focus                                                                                    |
    | onClick     | function              | A callback function that triggers when the user clicks on the button                                                 |
    | isActive    | boolean               | Determines if the button is in an active state                                                                       |
  </Tab>
</Tabs>

## Floating Icon Button Group

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props       | Type   | Description                                                                                                                                                                                                                                                          |
    | ----------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | className   | string | Optional name for additional styling                                                                                                                                                                                                                                 |
    | size        | string | The size of the button. Has two options: `small` and `medium`                                                                                                                                                                                                        |
    | iconButtons | array  | An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. |
  </Tab>
</Tabs>

## Light Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props     | Type              | Description                                                                 |
    | --------- | ----------------- | --------------------------------------------------------------------------- |
    | className | string            | Optional name for additional styling                                        |
    | icon      | `React.ReactNode` | The icon you want to display in the button                                  |
    | title     | string            | The text content of the button                                              |
    | accent    | string            | The accent color of the button. Options include: `secondary` and `tertiary` |
    | active    | boolean           | Determines if the button is in an active state                              |
    | disabled  | boolean           | Determines whether the button is disabled                                   |
    | focus     | boolean           | Indicates if the button has focus                                           |
    | onClick   | function          | A callback function that triggers when the user clicks on the button        |
  </Tab>
</Tabs>

## Light Icon Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props     | Type                  | Description                                                                 |
    | --------- | --------------------- | --------------------------------------------------------------------------- |
    | className | string                | Optional name for additional styling                                        |
    | testId    | string                | Test identifier for the button                                              |
    | Icon      | `React.ComponentType` | An optional icon component that's displayed within the button               |
    | title     | string                | The text content of the button                                              |
    | size      | string                | The size of the button. Has two options: `small` and `medium`               |
    | accent    | string                | The accent color of the button. Options include: `secondary` and `tertiary` |
    | active    | boolean               | Determines if the button is in an active state                              |
    | disabled  | boolean               | Determines whether the button is disabled                                   |
    | focus     | boolean               | Indicates if the button has focus                                           |
    | onClick   | function              | A callback function that triggers when the user clicks on the button        |
  </Tab>
</Tabs>

## Main Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props                | Type                             | Description                                                                       |
    | -------------------- | -------------------------------- | --------------------------------------------------------------------------------- |
    | title                | string                           | The text content of the button                                                    |
    | fullWidth            | boolean                          | Defines whether the button should span the whole width of its container           |
    | variant              | string                           | The visual style variant of the button. Options include `primary` and `secondary` |
    | soon                 | boolean                          | Indicates if the button is marked as "soon" (such as for upcoming features)       |
    | Icon                 | `React.ComponentType`            | An optional icon component that's displayed within the button                     |
    | React `button` props | `React.ComponentProps<'button'>` | All standard HTML button props are supported                                      |
  </Tab>
</Tabs>

## Rounded Icon Button

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props                | Type                                            | Description |
    | -------------------- | ----------------------------------------------- | ----------- |
    | Icon                 | `React.ComponentType`                           |             |
    | React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |             |
  </Tab>
</Tabs>