Componente de botón React Rebass

En este artículo, veremos cómo usar el componente de botón en React Rebass. El botón es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente de botón, podemos importar el componente Rebass Button. En el componente Rebass Button, hay mucha variedad de botones.

Componente de botón: crea un botón que indicará una posible acción del usuario.

Sintaxis:

<Button>
    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: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale React Rebass en su directorio dado.

 npm install --save react-toolbox

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de botón.

App.js

import React from "react";
import { Button } from "rebass";
import { Text } from "rebass";
  
   
const gfg = () => {
    return (
        <div id="gfg">
            <Text
                fontSize={[ 3, 4, 5 ]}
                fontWeight='bold'
                color='green'
                ml="42%">
                Geeksforgeeks
            </Text>
            <Text
                fontSize={[ 1, 2, 3 ]}
                fontWeight='bold'
                color='black'
                ml="41%">
                Rebass Button Component
            </Text>
            <br />
            <Button
                as="a"
                href="https://www.geeksforgeeks.org/"
                color="white"
                bg="green"
                mr={3}
                ml="40%"
            >
                LogIn
            </Button>
            <Button color="white" 
                    bg="blue" mr={3} 
                    variant='outline'>
                LogOut
            </Button>
            <Button color="white" 
                    bg="red" 
                    disabled="false">
                Subscribe
            </Button>
        </div>
    );
};
   
export default gfg;

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

npm start

Producción:

Referencia: https://rebassjs.org/button

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *