---
title: Botões
icon: hand-pointer
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Cabeçalho" />
</Frame>

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

## Botão

<Tabs>

<Tab title="Uso">

```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="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
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
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
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
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
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
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
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
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
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>