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

# Botões

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

Uma lista de botões e grupos de botões usados em todo o aplicativo.

## Botão

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades    | Tipo                  | Descrição                                                                                                        |
    | --------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
    | className       | string                | Nome de classe opcional para estilo adicional                                                                    |
    | Ícone           | `React.ComponentType` | Um componente de ícone opcional que é exibido dentro do botão                                                    |
    | título          | string                | O conteúdo de texto do botão                                                                                     |
    | larguraCompleta | booleano              | Define se o botão deve ocupar toda a largura do seu container                                                    |
    | variante        | string                | A variante de estilo visual do botão. As opções incluem `primary`, `secondary` e `tertiary`                      |
    | tamanho         | string                | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                         |
    | posição         | string                | A posição do botão em relação aos seus irmãos. As opções incluem: `independente`, `esquerda`, `direita` e `meio` |
    | destaque        | string                | A cor de destaque do botão. As opções incluem: `padrão`, `azul` e `perigo`                                       |
    | em breve        | booleano              | Indica se o botão está marcado como "em breve" (como para recursos futuros)                                      |
    | desativado      | booleano              | Especifica se o botão está desativado ou não                                                                     |
    | foco            | booleano              | Determina se o botão está em foco                                                                                |
    | aoClicar        | função                | Uma função de callback que é acionada quando o usuário clica no botão                                            |
  </Tab>
</Tabs>

## Grupo de Botões

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades | Tipo      | Descrição                                                                                                     |
    | ------------ | --------- | ------------------------------------------------------------------------------------------------------------- |
    | variante     | string    | A variante de estilo visual dos botões dentro do grupo. As opções incluem `primary`, `secondary` e `tertiary` |
    | tamanho      | string    | O tamanho dos botões dentro do grupo. Tem duas opções: `médio` e `pequeno`                                    |
    | destaque     | string    | A cor de destaque dos botões dentro do grupo. As opções incluem `padrão`, `azul` e `perigo`                   |
    | className    | string    | Nome de classe opcional para estilo adicional                                                                 |
    | filhos       | ReactNode | Um array de elementos React que representam os botões individuais no grupo                                    |
  </Tab>
</Tabs>

## Botão Flutuante

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades    | Tipo                  | Descrição                                                                                                       |
    | --------------- | --------------------- | --------------------------------------------------------------------------------------------------------------- |
    | className       | string                | Nome opcional para estilo adicional                                                                             |
    | Ícone           | `React.ComponentType` | Um componente de ícone opcional que é exibido dentro do botão                                                   |
    | título          | string                | O conteúdo de texto do botão                                                                                    |
    | tamanho         | string                | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                        |
    | posição         | string                | A posição do botão em relação aos seus irmãos. As opções incluem: `independente`, `esquerda`, `meio`, `direita` |
    | aplicarSombra   | booleano              | Determina se deve aplicar sombra a um botão                                                                     |
    | aplicarDesfoque | booleano              | Determina se deve aplicar um efeito de desfoque ao botão                                                        |
    | desativado      | booleano              | Determina se o botão está desativado                                                                            |
    | foco            | booleano              | Indica se o botão está em foco                                                                                  |
  </Tab>
</Tabs>

## Grupo de Botões Flutuantes

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades | Tipo      | Descrição                                                                  | Padrão  |
    | ------------ | --------- | -------------------------------------------------------------------------- | ------- |
    | tamanho      | string    | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                   | pequeno |
    | filhos       | ReactNode | Um array de elementos React que representam os botões individuais no grupo |         |
  </Tab>
</Tabs>

## Botão de Ícone Flutuante

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades    | Tipo                  | Descrição                                                                                                        |
    | --------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
    | className       | string                | Nome opcional para estilo adicional                                                                              |
    | Ícone           | `React.ComponentType` | Um componente de ícone opcional que é exibido dentro do botão                                                    |
    | tamanho         | string                | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                         |
    | posição         | string                | A posição do botão em relação aos seus irmãos. As opções incluem: `independente`, `esquerda`, `direita` e `meio` |
    | aplicarSombra   | booleano              | Determina se deve aplicar sombra a um botão                                                                      |
    | aplicarDesfoque | booleano              | Determina se deve aplicar um efeito de desfoque ao botão                                                         |
    | desativado      | booleano              | Determina se o botão está desativado                                                                             |
    | foco            | booleano              | Indica se o botão está em foco                                                                                   |
    | aoClicar        | função                | Uma função de callback que é acionada quando o usuário clica no botão                                            |
    | estáAtivo       | booleano              | Determina se o botão está em um estado ativo                                                                     |
  </Tab>
</Tabs>

## Grupo de Botões de Ícone Flutuantes

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades  | Tipo   | Descrição                                                                                                                                                                                                                                             |
    | ------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | className     | string | Nome opcional para estilo adicional                                                                                                                                                                                                                   |
    | tamanho       | string | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                                                                                                                                                              |
    | botõesDeÍcone | array  | Um array de objetos, cada um representando um botão de ícone no grupo. Cada objeto deve incluir o componente de ícone que você deseja exibir no botão, a função a ser chamada quando um usuário clica no botão, e se o botão deve estar ativo ou não. |
  </Tab>
</Tabs>

## Botão Claro

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades | Tipo              | Descrição                                                              |
    | ------------ | ----------------- | ---------------------------------------------------------------------- |
    | className    | string            | Nome opcional para estilização adicional.                              |
    | ícone        | `React.ReactNode` | O ícone que você deseja exibir no botão                                |
    | título       | string            | O conteúdo de texto do botão                                           |
    | destaque     | string            | A cor de destaque do botão. Opções incluem: `secundário` e `terciário` |
    | ativo        | booleano          | Determina se o botão está em um estado ativo                           |
    | desativado   | booleano          | Determina se o botão está desativado                                   |
    | foco         | booleano          | Indica se o botão está em foco                                         |
    | onClick      | função            | Uma função de callback que é acionada quando o usuário clica no botão  |
  </Tab>
</Tabs>

## Botão de Ícone Claro

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades | Tipo                  | Descrição                                                              |
    | ------------ | --------------------- | ---------------------------------------------------------------------- |
    | className    | string                | Nome opcional para estilização adicional.                              |
    | testeId      | string                | Identificador de teste para o botão                                    |
    | Ícone        | `React.ComponentType` | Um componente de ícone opcional que é exibido dentro do botão          |
    | título       | string                | O conteúdo de texto do botão                                           |
    | tamanho      | string                | O tamanho do botão. Possui duas opções: `pequeno` e `médio`            |
    | destaque     | string                | A cor de destaque do botão. Opções incluem: `secundário` e `terciário` |
    | ativo        | booleano              | Determina se o botão está em um estado ativo                           |
    | desativado   | booleano              | Determina se o botão está desativado                                   |
    | foco         | booleano              | Indica se o botão está em foco                                         |
    | aoClicar     | função                | Uma função de callback que é acionada quando o usuário clica no botão  |
  </Tab>
</Tabs>

## Botão Principal

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades         | Tipo                             | Descrição                                                                       |
    | -------------------- | -------------------------------- | ------------------------------------------------------------------------------- |
    | título               | string                           | O conteúdo de texto do botão                                                    |
    | larguraCompleta      | booleano                         | Define se o botão deve ocupar toda a largura do seu container                   |
    | variante             | string                           | A variante de estilo visual do botão. As opções incluem `primary` e `secondary` |
    | em breve             | booleano                         | Indica se o botão está marcado como "em breve" (como para recursos futuros)     |
    | Ícone                | `React.ComponentType`            | Um componente de ícone opcional que é exibido dentro do botão                   |
    | React `button` props | `React.ComponentProps<'button'>` | Todos os props padrão de botão HTML são suportados                              |
  </Tab>
</Tabs>

## Botão de Ícone Arredondado

<Tabs>
  <Tab title="Uso">
    ```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="Propriedades">
    | Propriedades         | Tipo                                            | Descrição |
    | -------------------- | ----------------------------------------------- | --------- |
    | Ícone                | `React.ComponentType`                           |           |
    | React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |           |
  </Tab>
</Tabs>