Componente de botón React-Bootstrap

Introducción: React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Bootstrap fue reconstruido y renovado para React, por lo que se conoce como React-Bootstrap. Los botones se utilizan para realizar acciones en el sitio web y juegan un papel crucial en la parte frontal.

Accesorios de botones:

• variante: se utiliza para agregar diferentes temas y estilos visuales para las insignias.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.
• disabled : Se utiliza para deshabilitar botones.
• activo: Se utiliza para establecer manualmente el estado inactivo del botón.
• tamaño: Se utiliza para especificar el tamaño del botón.
• as: se utiliza como un elemento personalizado con fines descriptivos para este compuesto.
• tipo: Se utiliza para definir la funcionalidad del botón.
• name: Se utiliza para nombrar cada botón.
• valor: Se utiliza para dar valores específicos a cada botón.
• onChange: la función de devolución de llamada se activa cuando se presiona un botón según el tipo de botón. 

Accesorios de ToggleButtonGroup:

• name :   Se utiliza para nombrar cada botón.
• onChange: la función de devolución de llamada se activa cuando se presiona un botón según el tipo de botón. 
• tamaño: Se utiliza para especificar el tamaño del botón.
• tipo: se utiliza para definir la funcionalidad del botón como radio o casilla de verificación.
• valor: Se utiliza para dar valores específicos a cada botón.
• vertical: Se utiliza para diseñar los botones de forma vertical.

Accesorios de ToggleButton:

• disabled : se utiliza para deshabilitar tanto la etiqueta como la entrada.
• inputRef: se agrega una referencia al elemento <input>.
• tipo: se utiliza para definir la funcionalidad del botón como radio o casilla de verificación.
• verificado: determina el estado verificado del elemento de entrada que es administrado por <ToggleButtonGroup>.
• onChange: la función de devolución de llamada se activa cuando se presiona un botón según el tipo de botón. 
• name: Se utiliza para determinar el nombre de cada botón.
• valor: Se utiliza para dar valores específicos a cada botón que debe ser único para sus hermanos.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando.

  cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando.

  npm install react-bootstrap bootstrap

• Paso 4: agregue la siguiente línea en el archivo index.js .

  import 'bootstrap/dist/css/bootstrap.css';

Estructura del proyecto: Tendrá el siguiente aspecto.

Acercarse:

• Primero, instale react-bootstrap usando el comando mencionado anteriormente.
• Ahora en el archivo app.js escriba el código siguiendo las instrucciones a continuación.
• Después de completar la instalación, importe ‘ButtonGroup’ desde ‘react-bootstrap/Button-Group’ en ese archivo.
• ButtonGroup se usa para agrupar múltiples botones y para cambiar los colores de los botones podemos usar la propiedad «variant». Como primario, secundario y peligro.

Ejemplo: ahora use el fragmento de código a continuación en ese archivo y exporte ese componente para que podamos importarlo en index.js para renderizar.

import React from "react";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";
  
export default function ButtonGrouping() {
  return (
    <>
      <h3>Normal Buttons</h3>
      <ButtonGroup aria-label="Basic example">
        <Button variant="primary">
            Primary variant Button
        </Button>
        <Button variant="secondary">
            Secondary variant Button
        </Button>
        <Button variant="danger">
            Danger variant Button
        </Button>
        <Button variant="warning">
            Warning variant Button
        </Button>
        <Button variant="info">
            Info variant Button
        </Button>
        <Button variant="success">
            Success variant Button
        </Button>
        <Button variant="light">
            Light variant Button
        </Button>
        <Button variant="dark">
            Dark variant Button
        </Button>
      </ButtonGroup>
  
      <br />
      <br />
      <br />
  
      <h3>Outline Variant Buttons</h3>
  
      <ButtonGroup>
        <Button variant="outline-primary">
          Primary variant outline Button
        </Button>
        <Button variant="outline-secondary">
            Secondary outline Button
        </Button>
        <Button variant="outline-success">
            Success outline Button
        </Button>
        <Button variant="outline-warning">
            Warning outline Button
        </Button>
        <Button variant="outline-danger">
            Danger outline Button
        </Button>
        <Button variant="outline-info">
            Info outline Button
        </Button>
        <Button variant="outline-dark">
            Dark outline Button
        </Button>
      </ButtonGroup>
  
      <br />
      <br />
      <br />
  
      <h3>Size Variant Buttons</h3>
  
      <ButtonGroup>
        <Button variant="primary" size="lg">
          Large variant primary Button
        </Button>
        <Button variant="secondary" size="sm">
          Small variant secondary Button
        </Button>
      </ButtonGroup>
  
      <br />
      <br />
  
      <h3>Disabled Variant Buttons</h3>
  
      <ButtonGroup>
        <Button variant="primary" size="lg" disabled>
          Disabled Large variant primary Button
        </Button>
        <Button variant="secondary" size="sm" disabled>
          Disabled Small variant secondary Button
        </Button>
      </ButtonGroup>
    </>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://react-bootstrap.netlify.app/components/buttons/#buttons