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.

    React Button Example

    Usage

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

    npm install igniteui-react

    Entonces tendrás que importar elIgrButton CSS necesario y su contenido, así:

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

    The simplest way to start using the IgrButton is as follows:

    <IgrButton />

    Prefix / Suffix

    Conprefix las ranurassuffix y delIgrButton componente, podemos añadir 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>

    Type

    El componente botón cambiará su estructura interna de a<button> a elemento<a> tipo cuando se establece elhref atributo. En ese caso, el botón puede considerarse un enlace normal. Configurar elhref atributo te permitirá también establecer losrel​target atributos ydownload. En el caso de que el componente button use un elemento real<button> internamente, podemos especificarlodisplayType asignando la propiedad a 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 añadir un botón con una funcionalidad personalizada en cualquier parte de una página web

    Button Variants

    Contained Button

    Usa elvariant atributo para añadir un botón simple de contenido contenido en tu plantilla de componentes. Ten en cuenta que si no configuras variant, por defecto se pondrá en contained.

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

    Outlined Button

    Todo lo que tienes que hacer para crear unoutlined botón es cambiar el valor de lavariant propiedad:

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

    Flat Button

    De forma analógica, podemos cambiar aflat variante.

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

    Floating Action Button

    Podemos crear un botón de acción flotante estableciendo lavariant propiedad en:fab​

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

    Button Sizing

    Los usuarios pueden cambiar el tamaño de laIgrButton variable CSS--ig-size. En el siguiente ejemplo, añadiremos algunos botones de radio para mostrar todos los valores de tamaño. Así, 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:

    Download

    Configurar ladownload propiedad pedirá al usuario que guarde la URL enlazada en lugar de navegar hasta ella.

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

    Styling

    ExponeIgrButton tres partes CSS que podemos usar para el estilismo:

    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.

    Labase 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;
}

    API References

    Additional Resources