twenty/packages/twenty-docs/twenty-ui/input/buttons.mdx

---
title: Buttons
image: /images/user-guide/views/filter.png
---
<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

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

## Button

<Tabs>

<Tab title="Usage">

```jsx
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
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
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
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
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
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
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
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
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
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>