github-actions[bot]
2353bc62cc
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
440 lines
21 KiB
Plaintext
440 lines
21 KiB
Plaintext
---
|
|
title: Botones
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<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>
|