Button (Botón)

Los botones permiten a los usuarios ejecutar acciones, y tomar decisiones, con un simple toque.

Los botones comunican acciones que los usuarios pueden realizar. Usualmente están ubicados dentro de tu interfaz, en lugares como:

Diálogos
Ventanas modal
Formularios
Tarjetas
Barras de herramientas

Botones Complejos

The Button comes with three variants: text (default), contained, and outlined.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

Text buttons

Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. En las tarjetas, los botones de texto ayudan a mantener un énfasis en el contenido de la tarjeta.

Link

<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

Contained buttons

Los Botones contenidos son de alto énfasis, distinguidos por el uso de elevación y relleno. Contienen acciones que son primarias para la aplicación.

Link

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>

Se puede eliminar la elevación con la prop disableElevation.

<Button variant="contained" disableElevation>
  Disable elevation
</Button>

Outlined buttons

Botones con contorno (outlined) son de énfasis medio. They contain actions that are important, but aren't the primary action in an app.

Los botones delineados también son una alternativa de menos énfasis que los botones contenidos, o de mayor énfasis que los botones de texto.

Link

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
  Link
</Button>

Controlador del click

Todos los componentes aceptan un controlador onClick el cual se aplica al elemento raíz en el DOM.

<Button onClick={() => { alert('clicked') }}>Click me</Button>

Ten en cuenta que la documentación evita mencionar las propiedades nativas (existen varias) en la sección API de los componentes.

Color

Botones más grandes o más pequeños? Usa la propiedad size.

In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the Adding new colors example for more info.

Tamaños

For larger or smaller buttons, use the size prop.

Botón de subida

Upload

<label htmlFor="contained-button-file">
  <Input accept="image/*" id="contained-button-file" multiple type="file" />
  <Button variant="contained" component="span">
    Upload
  </Button>
</label>
<label htmlFor="icon-button-file">
  <Input accept="image/*" id="icon-button-file" type="file" />
  <IconButton color="primary" aria-label="upload picture" component="span">
    <PhotoCamera />
  </IconButton>
</label>

Botones con iconos y títulos

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. Por ejemplo, si se crea un botón para borrar se le puede poner un icono de papelera.

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

Icon button

Los botones de iconos suelen encontrarse en las barras de aplicaciones y las barras de herramientas.

Los iconos son también apropiados para botones toggle que permiten marcar o desmarcar una sola opción, tal como poner o quitar una estrella de un elemento.

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Tamaños

For larger or smaller icon buttons, use the size prop.

<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon fontSize="inherit" />
</IconButton>

Botones Personalizados

Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.

Botones Personalizados

The loading buttons can show loading state and disable interactions.

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

Toggle the switch to see the transition between the different states.

Complex buttons

Los Botones de Texto, los Botones Contenidos, los Botones de Acción Flotantes y los Botones con Iconos se construyen sobre el mismo componente: el ButtonBase. You can take advantage of this lower-level component to build custom interactions.

Librería externa de routing

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Un caso de uso común es emplear el botón para iniciar la navegación hacia una nueva página. Here is a more detailed guide.

Limitaciones

Cursor no permitido

El componente ButtonBase define pointer-events: none; en los botones deshabilitados, lo que previene la aparición del cursor desactivado.

Si deseas usar not-allowed, tienes dos opciones:

Mediante CSS. Puedes eliminar los estilos del cursor aplicados cuando el elemento <button> está deshabilitado:

.MuiButtonBase-root:disabled {
    cursor: not-allowed;
    pointer-events: auto;
  }

Sin embargo:

Debería añadir pointer-events: none cuando necesite mostrar tooltips en elemento deshabilitados.
The cursor won't change if you render something other than a button element, for instance, a link <a> element.

Cambio en el DOM. Puede encapsular el botón:

<span style={{ cursor: 'not-allowed' }}>
    <Button component={Link} disabled>
      disabled
    </Button>
  </span>

Este tiene la ventaja de permitir cualquier elemento, por ejemplo un enlace <a></0>.