Botones

Una lista de botones y grupos de botones utilizados en toda la aplicación.

Botón

"Uso"
"Props"

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")}
    />
  );
};

”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

Grupo de Botones

Uso
Props

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>
  );
};

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

Botón Flotante

Uso
Props

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}
    />
  );
};

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

Grupo de Botones Flotantes

"Uso"
"Props"

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>
  );
};

”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

Botón de Ícono Flotante

Uso
Props

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}
    />
  );
};

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

Grupo de Botones de Ícono Flotante

Uso
Props

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} />
  );
};

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.

Botón Claro

Uso
Props

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')}
  />;
};

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

Botón de Ícono Claro

"Uso"
"Props"

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")}
    />
  );
};

”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

Botón Principal

Uso
Propiedades

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}
    />
  );
};

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

Botón de Icono Redondeado

"Uso"
"Props"

import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};

”Props”	Tipo	Descripción
Ícono	`React.ComponentType`
Propiedades React `button`	`React.ButtonHTMLAttributes<HTMLButtonElement>`

Welcome

Core Concepts

Botón

Grupo de Botones

Botón Flotante

Grupo de Botones Flotantes

Botón de Ícono Flotante

Grupo de Botones de Ícono Flotante

Botón Claro

Botón de Ícono Claro

Botón Principal

Botón de Icono Redondeado

​Botón

​Grupo de Botones

​Botón Flotante

​Grupo de Botones Flotantes

​Botón de Ícono Flotante

​Grupo de Botones de Ícono Flotante

​Botón Claro

​Botón de Ícono Claro

​Botón Principal

​Botón de Icono Redondeado

Botón

Grupo de Botones

Botón Flotante

Grupo de Botones Flotantes

Botón de Ícono Flotante

Grupo de Botones de Ícono Flotante

Botón Claro

Botón de Ícono Claro

Botón Principal

Botón de Icono Redondeado