---
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="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "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="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "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="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "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="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "Props"                    | Tipo                                            | Descripción |
    | -------------------------- | ----------------------------------------------- | ----------- |
    | Ícono                      | `React.ComponentType`                           |             |
    | Propiedades React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` |             |
  </Tab>
</Tabs>