Nexus – Elemento: Button

¿Qué es?

Button es un componente de tipo Form. Es un botón de acción con distintas variantes de estilo, pensado para disparar acciones (navegar, ejecutar queries, mostrar/ocultar componentes, etc.) mediante Events & Actions. Al arrastrarlo al lienzo viene con un texto de ejemplo precargado (“Click me”).

Propiedades

Al seleccionar Button en el lienzo, el panel derecho muestra “Properties of Button” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. btn_8b8e9fd9).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Label: texto que se muestra dentro del botón (ej. “Click me”).
• Variant: menú desplegable que define el color/estilo del botón. Opciones: Success, Info, Danger.
• Size: menú desplegable que define el tamaño del botón. Opciones: Small, Medium, Large.
• Disabled: casilla que deshabilita el botón (queda inactivo, sin poder hacer clic).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos (qué hace el botón al hacer clic). Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

El uso típico de Button es combinarlo con Events & Actions, configurando un trigger On Click junto a la acción deseada (por ejemplo, Navigate para llevar a otra pantalla, o Execute Query para disparar una consulta de datos). Con Variant se puede dar significado visual a la acción: por ejemplo, Success para una acción de confirmación, o Danger para una acción destructiva como eliminar algo. Activando Disabled, el botón queda inhabilitado — útil para bloquearlo hasta que se cumpla alguna condición (por ejemplo, hasta que un formulario esté completo).