Félix Malfait
5d438bb70c
## Summary - **New Getting Started section** with quickstart guide and restructured navigation - **Halftone-style illustrations** for User Guide and Developer introduction cards using a Canvas 2D filter script - **Removed hero images** (`image:` frontmatter + `<Frame><img>` blocks) from all user-guide article pages - **Cleaned up translations** (13 languages): removed hero images and updated introduction cards to use halftone style - **Cleaned up twenty-ui pages**: removed outdated hero images from component docs - **Deleted orphaned images**: `table.png`, `kanban.png` - **Developer page**: fixed duplicate icon, switched to 3-column layout ## Test plan - [ ] Verify docs site builds without errors - [ ] Check User Guide introduction page renders halftone card images in both light and dark mode - [ ] Check Developer introduction page renders 3-column layout with distinct icons - [ ] Confirm article pages no longer show hero images at the top - [ ] Spot-check a few translated pages to ensure hero images are removed 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@twenty.com>
439 lines
21 KiB
Plaintext
439 lines
21 KiB
Plaintext
---
|
|
title: Botones
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Encabezado" />
|
|
</Frame>
|
|
|
|
Una lista de botones y grupos de botones utilizados en toda la aplicación.
|
|
|
|
## Botón
|
|
|
|
<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=""Props"">
|
|
| "Props" | Tipo | Descripción |
|
|
| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
| "className" | string | 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 ocupar 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 "pronto" (como para funciones próximas) |
|
|
| deshabilitado | 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="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="Props">
|
|
| Props | Tipo | Descripción |
|
|
| --------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
| variante | cadena | La variante de estilo visual de los botones dentro del grupo. Las opciones incluyen `primario`, `secundario` y `terciario` |
|
|
| tamaño | cadena | El tamaño de los botones dentro del grupo. Tiene dos opciones: `mediano` y `pequeño` |
|
|
| acento | cadena | El color de acento de los botones dentro del grupo. Las opciones incluyen `predeterminado`, `azul` y `peligro` |
|
|
| className | cadena | Nombre de clase opcional para estilos adicionales |
|
|
| hijos | ReactNode | Una matriz de elementos React que representan los botones individuales dentro del grupo |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Botón Flotante
|
|
|
|
<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="Props">
|
|
| Props | Tipo | Descripción |
|
|
| ----------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | cadena | Nombre 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 |
|
|
| 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 |
|
|
| deshabilitado | 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=""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=""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="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="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 |
|
|
| 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 |
|
|
| esActivo | booleano | Determina si el botón está en estado activo |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Grupo de Botones de Ícono Flotante
|
|
|
|
<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="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 | Una matriz de objetos, cada uno de los cuales representa un botón de icono del grupo. 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="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="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. Las 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=""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=""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="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="Propiedades">
|
|
| Propiedades | Tipo | Descripción |
|
|
| -------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |
|
|
| título | "cadena" | El contenido de texto del botón |
|
|
| anchoCompleto | 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 `primary` y `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=""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=""Props"">
|
|
| "Props" | Tipo | Descripción |
|
|
| -------------------------- | ----------------------------------------------- | ----------- |
|
|
| Ícono | `React.ComponentType` | |
|
|
| Propiedades React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
</Tab>
|
|
</Tabs>
|