github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
523 lines
19 KiB
Plaintext
523 lines
19 KiB
Plaintext
---
|
|
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>
|