Botón
Los botones permiten a los usuarios realizar acciones y tomar decisiones con un solo toque.
Los botones comunican acciones que los usuarios pueden realizar. Suelen colocarse en toda la interfaz de usuario, en lugares como:
- Ventanas modales
- Formularios
- Tarjetas
- Barras de herramientas
Botón básico
El Button viene con tres variantes: text (por defecto), contained, and outlined.
Botón de texto
Botones de texto se utilizan normalmente para acciones menos pronunciadas, incluidas las situadas: en diálogos, en tarjetas. En las tarjetas, los botones de texto ayudan a mantener el énfasis en el contenido de la tarjeta.
Botón contenido
Botones contenidos son de alto énfasis, distinguidos por su uso de elevación y relleno. Contienen acciones que son primarias para su aplicación.
Puedes agregar la elevación con la propiedad enableElevation.
La elevación no tiene efecto alguno en el tema oscuro.
Botón contorneado
Los botones contorneados son botones de énfasis medio. Contienen acciones que son importantes pero no son la acción principal de una aplicación.
Los botones contorneados son también una alternativa de menor énfasis a los botones contenidos, o una alternativa de mayor énfasis a los botones de texto.
Manejo de clics
Todos los componentes aceptan un manejador onClick que se aplica al elemento DOM raíz.
<Button
onClick={() => {
alert('clicked');
}}
>
Click me
</Button>
Ten en cuenta que la documentación evita mencionar props nativos (hay muchos) en la sección API de los componentes.
Color
Además de usar los colores por defecto de los botones, puedes añadir colores personalizados, o desactivar los que no necesites. Vea los ejemplos de Añadir nuevos colores para más información.
Tamaños
Para botones más grandes o más pequeños, utiliza la propiedad size.
Botones con iconos y etiqueta
A veces es posible que desee tener iconos para ciertos botones para mejorar la UX de la aplicación, ya que reconocemos los logotipos más fácilmente que el texto plano. Por ejemplo, si tienes un botón de borrar puedes etiquetarlo con un icono de cubo de basura.
Cargando
A partir de la versión 6.4.0, utiliza la propiedad loading para poner los botones en estado de carga y desactivar las interacciones.
Botón de icono
Los botones con iconos suelen encontrarse en barras de aplicaciones y barras de herramientas.
Los iconos también son apropiados para los botones de alternancia que permiten seleccionar o deseleccionar una única opción, como añadir o quitar una estrella a un elemento. como añadir o quitar una estrella a un elemento.
Tamaños
Para botones con iconos más grandes o más pequeños, utilice la propiedad size.
Colores
Use color prop para aplicar la paleta de colores del tema al componente.
Subir fichero
Para crear un botón de carga de archivos, convierta el botón en una etiqueta utilizando component="label" y, a continuación, cree una entrada oculta visualmente con el tipo file.
API
Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.