Saltar al contenido

Button

Abrir en ChatGPT
Shadow dwc-button 23.02
Java API

Un componente Button es un elemento fundamental de la interfaz de usuario utilizado en el desarrollo de aplicaciones para crear elementos interactivos que desencadenan acciones o eventos cuando se hace clic o se activan. Sirve como un elemento clicable con el que los usuarios pueden interactuar para realizar diversas acciones dentro de una aplicación o sitio web.

El propósito principal del componente Button es proporcionar una llamada a la acción clara e intuitiva para los usuarios, guiándolos a realizar tareas específicas como enviar un formulario, navegar a otra página, desencadenar una función o iniciar un proceso. Los botones son esenciales para mejorar las interacciones del usuario, mejorar la accesibilidad y crear una experiencia de usuario más atractiva.

Mostrar Código

Usos

La clase Button es un componente versátil que se utiliza comúnmente en varias situaciones donde se necesitan desencadenar interacciones y acciones del usuario. Aquí hay algunos escenarios típicos donde podrías necesitar un botón en tu aplicación:

  1. Envío de Formularios: Los botones se utilizan a menudo para enviar datos de formularios. Por ejemplo, en una aplicación, puedes usar:
  • Un botón "Enviar" para enviar datos al servidor
  • Un botón "Limpiar" para eliminar cualquier información ya presente en el formulario
  1. Acciones del Usuario: Los botones se utilizan para permitir que los usuarios realicen acciones específicas dentro de la aplicación. Por ejemplo, puedes tener un botón etiquetado:
  • "Eliminar" para iniciar la eliminación de un elemento seleccionado
  • "Guardar" para guardar los cambios realizados en un documento o página.
  1. Diálogos de Confirmación: Los botones a menudo se incluyen en componentes de Dialog construidos para varios propósitos para proporcionar opciones a los usuarios para confirmar o cancelar una acción, o cualquier otra funcionalidad que esté integrada en el Dialog que estés utilizando.

  2. Detonadores de Interacción: Los botones pueden servir como detonadores para interacciones o eventos dentro de la aplicación. Al hacer clic en un botón, los usuarios pueden iniciar acciones complejas o desencadenar animaciones, actualizar contenido o modificar la visualización.

  3. Navegación: Los botones se pueden usar para fines de navegación, como moverse entre diferentes secciones o páginas dentro de una aplicación. Los botones para navegación podrían incluir:

  • "Siguiente" - Lleva al usuario a la siguiente página o sección de la aplicación o página actual.
  • "Anterior" - Devuelve al usuario a la página anterior de la aplicación o sección en la que están.
  • "Volver" - Devuelve al usuario a la primera parte de la aplicación o página en la que están.

Agregando íconos a los botones 24.11

Incorporar un ícono en un botón puede mejorar en gran medida el diseño de tu aplicación, permitiendo a los usuarios identificar rápidamente elementos accionables en la pantalla. El componente Icon proporciona una amplia selección de íconos para elegir.

Al utilizar los métodos setPrefixComponent() y setSuffixComponent(), tienes la flexibilidad de determinar si un Icon debe aparecer antes o después del texto en un botón. Alternativamente, se puede usar el método setIcon() para agregar un Icon después del texto, pero antes de la ranura del suffix del botón.

sugerencia

Por defecto, un Icon hereda el tema y la expansión del botón.

A continuación se muestran ejemplos de botones con texto a la izquierda y a la derecha, así como un botón con solo un ícono:

Mostrar Código

Nombres

El componente Button utiliza nombres, que se usan para accesibilidad. Cuando no se establece un nombre explícitamente, se utilizará la etiqueta del Button. Sin embargo, algunos íconos no tienen etiquetas y solo muestran elementos no-textuales, como íconos. En este caso, es conveniente utilizar el método setName() para garantizar que el componente Button creado cumpla con los estándares de accesibilidad.

Deshabilitando un botón

Los componentes de botón, como muchos otros, pueden ser deshabilitados para transmitir a un usuario que una cierta acción no está disponible aún o ya no está. Un botón deshabilitado disminuirá la opacidad del botón y está disponible para todos los temas y expansiones de botón.

Mostrar Código


Deshabilitar un botón se puede hacer en cualquier momento en el código utilizando la función setEnabled(boolean enabled). Para mayor comodidad, un botón también se puede deshabilitar al hacer clic utilizando la función incorporada setDisabledOnClick(boolean enabled).

En algunas aplicaciones, hacer clic en un botón desencadena una acción de larga duración. En la mayoría de los casos, la aplicación podría querer asegurarse de que solo se procese un solo clic. Esto puede ser un problema en entornos de alta latencia cuando el usuario hace clic en el botón varias veces antes de que la aplicación haya tenido la oportunidad de comenzar a procesar la acción resultante.

sugerencia

Deshabilitar al hacer clic no solo ayuda a optimizar el procesamiento de acciones, sino que también evita que el desarrollador tenga que implementar este comportamiento por su cuenta, ya que este método ha sido optimizado para reducir las comunicaciones de ida y vuelta.

Estilo

Temas

Los componentes Button vienen con 14 temas discretos incorporados para un rápido estilo sin el uso de CSS. Estos temas son estilos predefinidos que se pueden aplicar a los botones para cambiar su apariencia y presentación visual. Ofrecen una forma rápida y consistente de personalizar la apariencia de los botones a lo largo de una aplicación.

Mientras que hay muchos casos de uso para cada uno de los diversos temas, algunos ejemplos de uso son:

  • Peligroso: Mejor para acciones con graves consecuencias, como limpiar información completada o eliminar permanentemente una cuenta/datos.
  • Predeterminado: Apropiado para acciones a lo largo de una aplicación que no requieren atención especial y son genéricas, como alternar una configuración.
  • Primario: Apropiado como una "llamada a la acción" principal en una página, como registrarse, guardar cambios o continuar a otra página.
  • Éxito: Excelente para visualizar la finalización exitosa de un elemento en una aplicación, como el envío de un formulario o la finalización de un proceso de registro. El tema de éxito se puede aplicar programáticamente una vez que se ha completado una acción exitosa.
  • Advertencia: Útil para indicar que un usuario está a punto de realizar una acción potencialmente arriesgada, como navegar lejos de una página con cambios no guardados. Estas acciones son a menudo menos impactantes que aquellas que usarían el tema Peligroso.
  • Gris: Bueno para acciones sutiles, como configuraciones menores o acciones que son más suplementarias a una página y no forman parte de la funcionalidad principal.
  • Información: Bueno para proporcionar información aclaratoria adicional a un usuario.

A continuación se muestran botones de ejemplo con cada uno de los Temas soportados aplicados:

Mostrar Código

Expansiones

Los siguientes valores de Expansiones permiten un estilo rápido sin el uso de CSS. Esto permite manipular las dimensiones del botón sin tener que establecerlo explícitamente mediante ningún estilo. Además de simplificar el estilo, también ayuda a crear y mantener una uniformidad en tu aplicación. La expansión predeterminada del Button es Expanse.MEDIUM.

Diferentes tamaños son apropiados para diferentes usos:

  • Valores de expansión más grandes son adecuados para botones que deben captar la atención, enfatizar funcionalidad o son parte integral de la funcionalidad central de una aplicación o página.
  • Botones de expansión mediana, el tamaño predeterminado, deberían ser utilizados como un "tamaño estándar", cuando el comportamiento de un botón no es más o menos importante que otros componentes similares.
  • Valores de expansión más pequeños deben ser utilizados para botones que no tienen comportamientos integrales en la aplicación, y sirven un rol más suplementario o utilitario, en lugar de desempeñar un papel importante en la interacción del usuario. Esto incluye componentes Button que se utilizan únicamente con íconos para propósitos utilitarios.

A continuación se muestran las diversas expansiones soportadas para el componente Button:

Mostrar Código

Loading...

Mejores prácticas

Para garantizar una experiencia de usuario óptima al utilizar el componente Button, considera las siguientes mejores prácticas:

  1. Texto Apropiado: Usa texto claro y conciso para el texto dentro de tu componente Button para proporcionar una indicación clara de su propósito.

  2. Estilo Visual Apropiado: Considera el estilo visual y el tema del Button para garantizar la consistencia con el diseño de tu aplicación. Por ejemplo:

  • Un componente Button "Cancelar" debería estar estilizado con el tema o estilo CSS apropiado para asegurarse de que los usuarios estén seguros de que desean cancelar una acción.
  • Un Button "Confirmar" tendría un estilo diferente al de un botón "Cancelar", pero también debería destacarse para asegurar que los usuarios sepan que esta es una acción especial.
  1. Manejo Eficiente de Eventos: Maneja los eventos del Button de manera eficiente y proporciona retroalimentación apropiada a los usuarios. Consulta Eventos para revisar comportamientos de adición de eventos eficientes.

  2. Pruebas y Accesibilidad: Prueba el comportamiento del botón en diferentes escenarios, como cuando está deshabilitado o recibe enfoque, para garantizar una experiencia de usuario fluida. Sigue las pautas de accesibilidad para hacer que el Button sea utilizable para todos los usuarios, incluidos aquellos que dependen de tecnologías de asistencia.