Componente de botón de React Suite

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 de botón permite al usuario realizar acciones y elegir opciones con un solo toque. Podemos usar el siguiente enfoque en ReactJS para usar el componente de botón de React Suite.

Accesorios de botón:

• activo: Se utiliza para cambiar el estado del botón a activo.
• apariencia: Se utiliza para denotar la apariencia del botón.
• bloque: se utiliza para abarcar todo el ancho del botón principal.
• niños: Se utiliza para denotar el contenido principal.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• color: Se utiliza para denotar el color del botón.
• componentClass: se utiliza para pasar un elemento personalizado para este componente.
• disabled: Se utiliza para cambiar el estado del botón a desactivado.
• href: se utiliza para proporcionar un atributo href .
• loading: Se utiliza para mostrar un indicador de carga.
• tamaño: Se utiliza para indicar el tamaño del botón.

Accesorios de IconButton:

• círculo: Se utiliza para configurar el botón de círculo.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• icon: Se utiliza para configurar el icono del botón.
• colocación: Se utiliza para la colocación del icono.

Accesorios de grupo de botones:

• bloque: Se utiliza para mostrar grupos de botones de bloque.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• justificado: Se utiliza para el diseño de ancho constante horizontal
• tamaño: Se utiliza para indicar el tamaño del botón.
• vertical: se utiliza para los diseños verticales de botón

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 el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Aplicación.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Button } from 'rsuite'

export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite Button Component</h4>
      <Button appearance="primary">Primary Button</Button>  <br></br>
      <Button appearance="link">Link Button</Button> <br></br>
      <Button appearance="default">Default Button</Button> <br></br>
      <Button appearance="ghost">Ghost Button</Button> <br></br>
      <Button appearance="subtle">Subtle Button</Button>
    </div>
  );
}