github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
489 lines
21 KiB
Plaintext
489 lines
21 KiB
Plaintext
---
|
|
title: Botones
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Una lista de botones y grupos de botones utilizados en toda la aplicación.
|
|
|
|
## Botón
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| "className" | "cadena" | Nombre de clase opcional para estilos adicionales |
|
|
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
| título | "cadena" | El contenido de texto del botón |
|
|
| "fullWidth" | booleano | Define si el botón debe abarcar todo el ancho de su contenedor |
|
|
| variante | cadena | La variante de estilo visual del botón. Las opciones incluyen `primario`, `secundario` y `terciario` |
|
|
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
| posición | cadena | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
|
|
| acento | cadena | El color de acento del botón. Las opciones incluyen: `predeterminado`, `azul` y `peligro` |
|
|
| próximamente | booleano | Indica si el botón está marcado como "próximamente" (como para funciones futuras) |
|
|
| "desactivado" | booleano | Especifica si el botón está deshabilitado o no |
|
|
| enfoque | booleano | Determina si el botón tiene foco |
|
|
| alHacerClic | "función" | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grupo de Botones
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| "className" | "cadena" | "Nombre opcional para estilización adicional" |
|
|
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
| título | cadena | El contenido de texto del botón |
|
|
| tamaño | "cadena" | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
| posición | "cadena" | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `central`, `derecha` |
|
|
| aplicarSombra | booleano | Determina si se aplica sombra a un botón |
|
|
| aplicarDesenfoque | booleano | Determina si se aplica un efecto de desenfoque al botón |
|
|
| "desactivado" | booleano | Determina si el botón está deshabilitado |
|
|
| enfoque | booleano | Indica si el botón tiene foco |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Grupo de Botones Flotantes
|
|
|
|
<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" | Tipo | Descripción | Predeterminado |
|
|
| ------- | --------- | ---------------------------------------------------------------------------------------------- | -------------- |
|
|
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` | pequeño |
|
|
| hijos | ReactNode | Una matriz de elementos React que representan los botones individuales dentro del grupo | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botón de Ícono Flotante
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ----------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
|
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
| posición | cadena | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
|
|
| aplicarSombra | booleano | Determina si se aplica sombra a un botón |
|
|
| aplicarDesenfoque | booleano | Determina si se aplica un efecto de desenfoque al botón |
|
|
| "desactivado" | booleano | Determina si el botón está deshabilitado |
|
|
| enfoque | booleano | Indica si el botón tiene foco |
|
|
| alHacerClic | "función" | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
| esActivo | booleano | Determina si el botón está en estado activo |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grupo de Botones de Ícono Flotante
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| "className" | "cadena" | "Nombre opcional para estilización adicional" |
|
|
| tamaño | "cadena" | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
| iconButtons | array | An array of objects, each representing an icon button in the group. Cada objeto debe incluir el componente de ícono que desea mostrar en el botón, la función que desea llamar cuando un usuario hace clic en el botón y si el botón debe estar activo o no. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botón Claro
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ------------- | ----------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
|
| ícono | `React.ReactNode` | El ícono que desea mostrar en el botón |
|
|
| título | cadena | El contenido de texto del botón |
|
|
| acento | cadena | El color de acento del botón. Opciones incluyen: `secundario` y `terciario` |
|
|
| activo | booleano | Determina si el botón está en estado activo |
|
|
| deshabilitado | booleano | Determina si el botón está deshabilitado |
|
|
| enfoque | booleano | Indica si el botón tiene foco |
|
|
| alHacerClic | "función" | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botón de Ícono Claro
|
|
|
|
<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" | Tipo | Descripción |
|
|
| ------------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
|
| testId | cadena | Identificador de prueba para el botón |
|
|
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
| título | "cadena" | El contenido de texto del botón |
|
|
| tamaño | "cadena" | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
| acento | cadena | El color de acento del botón. Opciones incluyen: `secundario` y `terciario` |
|
|
| activo | booleano | Determina si el botón está en estado activo |
|
|
| "desactivado" | booleano | Determina si el botón está deshabilitado |
|
|
| enfoque | booleano | Indica si el botón tiene foco |
|
|
| alHacerClic | "función" | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botón Principal
|
|
|
|
<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" | Tipo | Descripción |
|
|
| -------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| título | cadena | El contenido de texto del botón |
|
|
| "fullWidth" | booleano | Define si el botón debe abarcar todo el ancho de su contenedor |
|
|
| variante | "cadena" | La variante de estilo visual del botón. Options include `primary` and `secondary` |
|
|
| próximamente | booleano | Indica si el botón está marcado como "próximamente" (como para funciones futuras) |
|
|
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
| Propiedades React `button` | `React.ComponentProps<'button'>` | Se admiten todas las propiedades estándar del botón HTML |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botón de Icono Redondeado
|
|
|
|
<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" | Tipo | Descripción |
|
|
| -------------------------- | ----------------------------------------------- | ----------- |
|
|
| Ícono | `React.ComponentType` | |
|
|
| Propiedades React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|