Botón

Un botón lanza las acciones que tiene asociadas: buscar, guardar, confirmar o abrir un diálogo. Debajo está el botón real del cliente React de AWE. Cambia sus atributos y el XML de debajo se actualiza; cópialo en tu pantalla.

Vista previa en vivo

ClaroOscuro

Controles

Etiqueta

Tipo de botón

NormalSubmitReset

Aspecto

Icono

∅Sin iconosavesearchtrashplusdownloadsendcheck

Tamaño

Por defectoPequeñoGrande

Solo icono

Ayuda (tooltip)

Deshabilitado por una dependencia

XML

<button id="demo" label="Save changes" button-type="submit" icon="save" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
label	Etiqueta	text
button-type	Tipo de botón	buttonsubmitreset
style	Aspecto	btn-primarybtn-defaultbtn-dangerbtn-successbtn-warningbtn-darkbtn-ghostbtn-tonal
icon	Icono	savesearchtrashplusdownloadsendcheck
size	Tamaño	smlg
style	Solo icono	true / false
help	Ayuda (tooltip)	text
dependency	Deshabilitado por una dependencia	true / false

Eventos y acciones

Evento	Descripción
click	Se lanza cuando el usuario pulsa el botón; entonces ejecuta sus acciones de botón.

Acción (type)	Qué hace
filter	Recarga una tabla o un gráfico con los criterios actuales.
confirm	Pide al usuario que confirme antes de ejecutar las acciones siguientes.
server	Llama a una acción de servidor (maintain, query, servicio).
dialog	Abre un diálogo.
restore	Lo que lanza un botón reset sin acciones: restaura los criterios.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Recetas

Botones habituales, dibujados por el mismo componente. Las acciones de servidor se simulan en estos ejemplos, así que al pulsar no se llama a ningún servidor.

Acción principal de un formulario

Un botón submit con estilo primario: es el que se ejecuta cuando el usuario pulsa Intro dentro de un criterio.

<button id="search" label="Buscar" button-type="submit" icon="search" style="btn-primary">
  <button-action type="filter" target="GrdUsrLst" />
</button>

Confirmar antes de borrar

La acción confirm detiene la cadena hasta que el usuario acepta; la acción server siguiente solo se ejecuta entonces.

<button id="del" label="Borrar" icon="trash" style="btn-danger">
  <button-action type="confirm" target="DelMsg" />
  <button-action type="server" server-action="maintain" target-action="UsrDel" />
  <button-action type="filter" target="GrdUsrLst" />
</button>

Botón solo con icono

no-label dibuja solo el icono. La etiqueta se mantiene: es el tooltip y el nombre accesible que anuncian los lectores de pantalla.

<button id="help" label="Ayuda" icon="question-circle" style="btn-ghost no-label">
  <button-action type="dialog" target="HlpOpt" />
</button>

Eventos y acciones

El botón tiene un evento, click. Al pulsarlo lanza sus elementos button-action en orden. Consulta acciones para ver todos los tipos de acción y dependencias para habilitar, deshabilitar u ocultar un botón según el estado de la pantalla.

Evento	Descripción
click	Se lanza cuando un usuario pulsa el botón

Más información

• Documentación completa del botón: atributos, tipos, estilos y ejemplos.
• Referencia XSD del elemento button.