Descripción general del botón React

The React Button Component lets you enable clickable elements that trigger actions in your React app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the React Button clicked callback, toggle the React button, disable the React button, and more.

React Button Example

Uso

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react

A continuación, tendrás que importar el IgrButton y el CSS necesario, de la siguiente manera:

import { IgrButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css';

<IgrButton />

Prefijo sufijo

Con las ranuras prefix y suffix del componente IgrButton, podemos agregar contenido diferente antes y después del contenido principal del botón.

<IgrButton type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgrButton>

Tipo

El componente del botón cambiará su estructura interna de un <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download. En el caso de que el componente del botón utilice un elemento <button> real internamente, podemos especificar su displayType estableciendo la propiedad en cualquiera de los siguientes valores:

Submit: cuando queremos enviar los datos del formulario.
reset- cuando queremos restablecer los datos del formulario a sus valores iniciales
button: cuando queremos agregar un botón con una funcionalidad personalizada en cualquier lugar de una página web

Variantes de botones

Botón contenido

Utilice el variant atributo para agregar un botón contenido simple en la plantilla de componentes. Tenga en cuenta que si no establece variant, de forma predeterminada se establecerá en contenido.

<IgrButton variant="contained"><span>Contained</span></IgrButton>

Botón delineado

Todo lo que tiene que hacer para crear un outlined botón es cambiar el valor de la variant propiedad:

<IgrButton variant="outlined"><span>Outlined</span></IgrButton>

Botón plano

Analógicamente podemos pasar a la variante flat.

<IgrButton variant="flat"><span>Flat</span></IgrButton>

Botón de acción flotante

Podemos crear un botón de acción flotante configurando la variant propiedad en fab:

<IgrButton variant="fab"><span>Fab</span></IgrButton>

Tamaño del botón

Los usuarios pueden cambiar el tamaño de la IgrButton variable--ig-size CSS. En el siguiente ejemplo, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño del botón.

import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; const [size, setSize] = useState("small"); const onRadioChange = (e: IgrRadioChangeEventArgs) => { setSize(e.detail.value); }; <IgrRadioGroup alignment="horizontal" style={{ display: "flex", margin: "0 auto", width: "15%" }}> <IgrRadio name="size" value="small" labelPosition="after" checked={size === "small"} onChange={onRadioChange}> <span>Small</span> </IgrRadio> <IgrRadio name="size" value="medium" labelPosition="after" onChange={onRadioChange}> <span>Medium</span> </IgrRadio> <IgrRadio name="size" value="large" labelPosition="after" onChange={onRadioChange}> <span>Large</span> </IgrRadio> </IgrRadioGroup> <div className="button-container"> <IgrButton className={"size-" + size} variant="flat"> <span>Flat</span> </IgrButton> <IgrButton className={"size-" + size} variant="contained"> <span>Contained</span> </IgrButton> <IgrButton className={"size-" + size} variant="outlined"> <span>Outlined</span> </IgrButton> <IgrButton className={"size-" + size} variant="fab"> <span>Like</span> </IgrButton> </div>

El resultado de implementar el código anterior debería verse similar al siguiente:

Descargar

Al establecer la download propiedad, se pedirá al usuario que guarde la URL vinculada en lugar de navegar a ella.

<IgrButton href="" variant="contained" download="url" target="_blank" > <span>Download</span> </IgrButton>

Estilismo

Expone IgrButton tres partes CSS que podemos usar para el estilo:

Nombre	Descripción
`base`	El elemento button nativo del componente igc-button.
`prefix`	Contenedor de prefijos del componente igc-button.
`suffix`	Contenedor de sufijos del componente igc-button.

La base parte CSS nos permite estilizar el elemento envuelto (<button> o <a>).

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}