Saltar al contenido
Ayuda a traducir esta página

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 contenidos

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">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>

You can remove the elevation with the disableElevation prop.

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

Botones de texto

Los Botones de texto se suelen usar para acciones menos notables, incluyendo las que se encuentran:

  • En diálogos
  • En tarjetas

En las tarjetas, los botones de texto ayudan a mantener un énfasis en el contenido de la tarjeta.

Link
<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons" color="primary">
  Link
</Button>

Botones con Contorno

Botones con contorno (outlined) son de énfasis medio. Contienen acciones que son importantes, pero no primarias en la 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">Default</Button>
<Button variant="outlined" color="primary">
  Primary
</Button>
<Button variant="outlined" color="secondary">
  Secondary
</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" color="primary" href="#outlined-buttons">
  Link
</Button>

Upload button

Tamaños

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

Botones con iconos y títulos

Tal vez se necesita tener iconos para un botón en particular para mejorar la experiencia del usuario de la aplicación porque se reconocen más fácilmente los logos que el texto. Por ejemplo, si se crea un botón para borrar se le puede poner un icono de papelera.

Botones con Iconos

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>

Customized buttons

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

👑 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Botones Complejos

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. Se puede sacar partido de este componente básico para construir interacciones personalizadas.

Librería externa de routing

One common use case is to use the button to trigger navigation to a new page. El componente ButtonBase provee un atributo para tratar este uso: component. Sin embargo, para ciertos rellenos ButtonBase requiere el nodo DOM del componente proporcionado. Esto se logra adjuntando una referencia al componente y esperando que el componente reenvíe esta referencia al nodo DOM subyacente. Given that many of the interactive components rely on ButtonBase, you should be able to take advantage of it everywhere.

Here is an integration example with react-router.

Limitaciones

Cursor not-allowed

The ButtonBase component sets pointer-events: none; on disabled buttons, which prevents the appearance of a disabled cursor.

If you wish to use not-allowed, you have two options:

  1. CSS only. You can remove the pointer events style on the disabled state of the <button> element:

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

However:

  • You should add pointer-events: none; back when you need to display tooltips on disabled elements.
  • The cursor won't change if you render something other than a button element, for instance, a link <a> element.

  1. DOM change. You can wrap the button:

    <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>.

API