Botón React Suite deshabilitado

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Botón se utiliza para activar una acción cuando el usuario hace clic en el botón. En este artículo, veremos el botón React Suite deshabilitado . 

La propiedad disabled del componente Button se utiliza para desactivar el botón. Los botones deshabilitados se usan cuando no queremos que el usuario haga clic en el botón.

Componentes deshabilitados del botón React Suite:

• Botón: este es el componente más básico utilizado para crear un botón.

Accesorios deshabilitados del botón React Suite:

• disabled: Es una propiedad booleana utilizada para deshabilitar el Botón.
• color: Esta propiedad del componente Botón se utiliza para cambiar el color del botón. La propiedad de color puede tener cualquiera de siete valores: rojo, naranja, amarillo, verde, cian, azul o violeta.

Sintaxis:

<Button disabled>Disabled Button</Button>

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: muévase a la carpeta del proyecto recién creada usando el siguiente comando:

cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale el módulo requerido (rsuite en este caso) usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de completar los pasos anteriores, la estructura del proyecto tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: En el siguiente ejemplo, usamos la propiedad disabled del componente Button para deshabilitar el botón.

import React from "react";
import { Button } from "rsuite";
  
// Default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const ButtonStyle = { margin: "10px 10px" };
    return (
  
        <div className="App" style={
                { textAlign: "center", padding: "0 30px" }
            }>
            <header style={
                    { display: "block", marginBottom: "20px" }
                }>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite Button Disabled</h5>
            </header>
  
            <Button disabled appearance="default" 
                    style={ButtonStyle}>
                    Disabled Default Button
            </Button>
            <Button disabled appearance="primary" 
                    style={ButtonStyle}>
                    Disabled Primary Button
            </Button>
            <Button disabled appearance="link" 
                    style={ButtonStyle}>
                    Disabled Link Button
            </Button>
            <Button disabled appearance="ghost" 
                    style={ButtonStyle}>
                    Disabled Ghost Button
            </Button>
            <Button disabled appearance="subtle" 
                    style={ButtonStyle}>
                    Disabled Subtle Button
            </Button>
        </div>
    );
}
  
export default App;

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:

 

Ejemplo 2: En este ejemplo, usamos la propiedad de color del componente Botón junto con la propiedad deshabilitada para cambiar el color del botón deshabilitado. 

import React from "react";
import { Button } from "rsuite";
  
// Default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const ButtonStyle = { margin: "10px 10px" };
    return (
        <div className="App" style={
            { textAlign: "center", padding: "0 30px" }
        }>
            <header style={{ display: "block", marginBottom: "20px" }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite Button Disabled - Color Variation</h5>
            </header>
  
            <Button disabled appearance="primary"
                    color="red" style={ButtonStyle}>
                        Disabled Red Button
            </Button>
            <Button disabled appearance="primary" 
                    color="yellow" style={ButtonStyle}>
                    Disabled Yellow Button
            </Button>
            <Button disabled appearance="primary" 
                    color="cyan" style={ButtonStyle}>
                    Disabled Cyan Button
            </Button>
            <Button disabled appearance="primary" 
                    color="blue" style={ButtonStyle}>
                    Disabled Blue Button
            </Button>
            <Button disabled appearance="primary" 
                    color="violet" style={ButtonStyle}>
                    Disabled Violet Button
            </Button>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/button/#disabled