Introducción

El componente Button es un elemento clicable flexible y altamente interactivo que se usa para desencadenar acciones, enviar formularios o restablecer entradas. Diseñado pensando en valores estáticos predeterminados sin JavaScript, admite de forma nativa múltiples variantes visuales, escalado de tamaño y temas de acento.

Para configuraciones avanzadas, los botones pueden configurarse con estados de indicador de carga o incrustarse con campos de ejecución de JavaScript crudo y personalizado (onclick) para ejecutar comportamientos personalizados al instante sin depender de una carga de hidratación completa del cliente.

Uso

Puedes construir y estilizar botones como se muestra a continuación:

Botón de acción básico

Un botón clásico de llamada a la acción principal, estilizado con rellenos sólidos o estilos de contorno estándar.

{
  "blockType": "button",
  "text": "Get Started",
  "variant": "solid",
  "colorPalette": "blue"
}

Botón de envío de formulario

En layouts de página que incluyen campos de formulario interactivos (como campos de texto dentro de un Fieldset), configura el tipo de acción del botón como "submit". Esto garantiza que el formulario principal capture el evento y envíe los campos correctamente.

{
  "blockType": "button",
  "text": "Submit Registration",
  "buttonType": "submit",
  "variant": "solid",
  "colorPalette": "green"
}

Botón con script de cliente en línea (avanzado)

Para interacciones instantáneas como alternar superposiciones, desplazamiento suave o disparar eventos personalizados sin hidratar toda la página, proporciona un fragmento de JavaScript crudo en el campo onclick.

{
  "blockType": "button",
  "text": "Notify System",
  "variant": "outline",
  "onclick": "window.dispatchEvent(new CustomEvent('park-ui:toast:create', { detail: { title: 'Action Registered' } }))"
}

Botones agrupados

Renderiza varios botones complementarios uno al lado del otro o unidos como un segmento cohesivo y contiguo. En el constructor de páginas CMS, anidar bloques button dentro de un bloque contenedor (como un bloque Group con attached habilitado) fusiona sus bordes sin costuras.

{
  "blockType": "group",
  "attached": true,
  "children": [
    {
      "blockType": "button",
      "text": "Previous",
      "variant": "outline"
    },
    {
      "blockType": "button",
      "text": "Next",
      "variant": "outline"
    }
  ]
}

Propiedades

Notas de arquitectura

• Prevención de colisiones: El campo de configuración del CMS usa la clave buttonType en lugar de type. Esto evita que los editores visuales del constructor de páginas confundan el tipo de botón HTML con el discriminador interno de bloques (blockType) del sistema.
• Ejecuciones inmediatas: Proporcionar scripts en onclick escribe un manejador de eventos crudo directamente en el marcado HTML renderizado en el servidor. Esto es extremadamente eficiente, ya que la lógica se ejecuta completamente en línea sin que el navegador necesite descargar, analizar y adjuntar escuchas JS durante la hidratación.
• Accesibilidad: Los comportamientos estándar de teclado (enfocar con Tab, activar con Space o Enter) son nativos de la etiqueta de botón HTML base del navegador y no requieren manejadores ARIA personalizados.