Descripción general del botón React

    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.

    Ejemplo de botón React

    EXAMPLE
    TSX
    ButtonOverviewStyle.css
    index.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
    Ignite UI for React | CTA Banner

    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

    Variantes de botones

    Botón contenido

    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

    EXAMPLE
    TSX
    CSS

    Botón delineado

    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

    EXAMPLE
    TSX
    CSS

    Botón plano

    Analógicamente podemos pasar a la variante flat.

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

    EXAMPLE
    TSX
    CSS

    Botón de acción flotante

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

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

    EXAMPLE
    TSX
    CSS

    Tamaño del botón

    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

    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

    EXAMPLE
    TSX
    CSS

    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

    Referencias de API

    Recursos adicionales