El componente Botón React te permite habilitar elementos en los que se puede hacer clic que activan acciones en tu aplicación React. Obtienes control total sobre cómo establecer variantes de botones, configurar estilos para el elemento envuelto y definir tamaños. El componente Botón también brinda flexibilidad a través de la devolución de llamada al hacer clic en el botón React, alternar el botón React, deshabilitar el botón React y más.
EXAMPLE
TSX
ButtonOverviewStyle.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './ButtonOverviewStyle.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonOverview extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="button-container" >
<IgrButton variant ="flat" > <span > Flat</span > </IgrButton >
<IgrButton variant ="contained" > <span > Contained</span > </IgrButton >
<IgrButton variant ="outlined" > <span > Outlined</span > </IgrButton >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonOverview /> );
tsx コピー .button-container {
display : flex;
justify-content : space-evenly;
margin-top : 20px ;
}
css コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
Luego necesitarás importar IgrButton
, su CSS necesario y registrar su módulo, así:
import { IgrButtonModule, IgrButton } from 'igniteui-react' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
tsx
<IgrButton />
tsx
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 >
tsx
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
Utilice el atributo variant
para agregar un botón contenido simple en su plantilla de componente. Tenga en cuenta que si no configura la variante, de forma predeterminada se configurará como contenida.
<IgrButton variant ="contained" > <span > Contained</span > </IgrButton >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonContained extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton variant ="contained" > <span > Contained</span > </IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonContained /> );
tsx コピー
Todo lo que tienes que hacer para crear un botón outlined
es cambiar el valor de la propiedad variant
:
<IgrButton variant ="outlined" > <span > Outlined</span > </IgrButton >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonOutlined extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton variant ="outlined" > <span > Outlined</span > </IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonOutlined /> );
tsx コピー
Analógicamente podemos pasar a la variante flat
.
<IgrButton variant ="flat" > <span > Flat</span > </IgrButton >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonFlat extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton variant ="flat" > <span > Flat</span > </IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonFlat /> );
tsx コピー
Podemos crear un botón de acción flotante configurando la propiedad variant
en fab
:
<IgrButton variant ="fab" > <span > Fab</span > </IgrButton >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonFab extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton variant ="fab" >
<span slot ="prefix" > +</span >
<span > Add</span >
</IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonFab /> );
tsx コピー
Los usuarios pueden cambiar el tamaño del componente button
usando la variable CSS--ig-size
. 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, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react' ;
<IgrRadioGroup alignment ="horizontal" style ={{display: 'flex ', margin: '0 auto ', width: '15 %'}}>
<IgrRadio name ="size" value ="small" labelPosition ="after" checked ={true} change ={this.onRadioChange} >
<span > Small</span >
</IgrRadio >
<IgrRadio name ="size" value ="medium" labelPosition ="after" change ={this.onRadioChange} >
<span > Medium</span >
</IgrRadio >
<IgrRadio name ="size" value ="large" labelPosition ="after" change ={this.onRadioChange} >
<span > Large</span >
</IgrRadio >
</IgrRadioGroup >
<div >
<IgrButton ref ={this.flatButtonRef} className ="flat-btn" variant ="flat" > <span > Flat</span > </IgrButton >
<IgrButton ref ={this.containedButtonRef} className ="contained-btn" variant ="contained" > <span > Contained</span > </IgrButton >
<IgrButton ref ={this.outlinedButtonRef} className ="outlined-btn" variant ="outlined" > <span > Outlined</span > </IgrButton >
<IgrButton ref ={this.fabButtonRef} className ="fab-btn" variant ="fab" > <span > Like</span > </IgrButton >
</div >
public onRadioChange(e: any ) {
this .flatButton.size = e.value;
this .containedButton.size = e.value;
this .outlinedButton.size = e.value;
this .fabButton.size = e.value;
}
tsx
El resultado de implementar el código anterior debería verse similar al siguiente:
EXAMPLE
TSX
ButtonSizingStyle.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './ButtonSizingStyle.css' ;
import { IgrButton, IgrRadio, IgrRadioGroup, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();
export default class ButtonSize extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .onRadioChange = this .onRadioChange.bind(this );
this .state = { size: "medium" };
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrRadioGroup alignment ="horizontal" style ={{display: 'flex ', margin: '0 auto ', width: '15 %'}}>
<IgrRadio name ="size" value ="small" labelPosition ="after" checked ={true} change ={this.onRadioChange} >
<span > Small</span >
</IgrRadio >
<IgrRadio name ="size" value ="medium" labelPosition ="after" change ={this.onRadioChange} >
<span > Medium</span >
</IgrRadio >
<IgrRadio name ="size" value ="large" labelPosition ="after" change ={this.onRadioChange} >
<span > Large</span >
</IgrRadio >
</IgrRadioGroup >
<div className ="button-container" >
<IgrButton className ={ 'size- ' + this.state.size } variant ="flat" > <span > Flat</span > </IgrButton >
<IgrButton className ={ 'size- ' + this.state.size } variant ="contained" > <span > Contained</span > </IgrButton >
<IgrButton className ={ 'size- ' + this.state.size } variant ="outlined" > <span > Outlined</span > </IgrButton >
<IgrButton className ={ 'size- ' + this.state.size } variant ="fab" > <span > Like</span > </IgrButton >
</div >
</div >
);
}
public onRadioChange(e: any ) {
if (e.checked == true ) {
this .setState({ size: e.value });
}
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonSize /> );
tsx コピー .button-container {
display : flex;
justify-content : space-evenly;
margin-top : 20px ;
}
.size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
css コピー
Descargar
Configurar la propiedad download
le pedirá al usuario que guarde la URL vinculada en lugar de navegar hasta ella.
<IgrButton
href =""
variant ="contained"
download ="url"
target ="_blank" >
<span > Download</span >
</IgrButton >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonDownload extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton href ="" variant ="contained" download ="url" target ="_blank" > <span > Download</span > </IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonDownload /> );
tsx コピー
Estilo
El componente del botón expone la parte CSS base
que nos permite diseñar el elemento envuelto (<button>
o <a>
).
igc-button ::part (base) {
background-color : #e99221 ;
color : #011627 ;
padding : 18px ;
}
css
EXAMPLE
TSX
ButtonStyle.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './ButtonStyle.css' ;
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrButtonModule.register();
export default class ButtonStyling extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<IgrButton variant ="contained" > <span > Contained</span > </IgrButton >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<ButtonStyling /> );
tsx コピー igc-button ::part (base) {
color : #011627 ;
}
igc-button ::part (base)::before {
background-color : #e99221 ;
padding : 18px ;
}
css コピー
Referencias de API
Recursos adicionales