Einführung

Die Button-Komponente ist ein flexibles, hoch interaktives klickbares Element zum Auslösen von Aktionen, Absenden von Formularen oder Zurücksetzen von Eingaben. Sie ist auf statische Zero-JS-Standardwerte ausgelegt und unterstützt nativ mehrere visuelle Varianten, Größenanpassung und Akzent-Farbthemen.

Für fortgeschrittene Setups können Buttons mit Ladeanzeige-Zuständen konfiguriert oder mit eigenen, rohen JavaScript-Ausführungsfeldern (onclick) versehen werden, um benutzerdefiniertes Verhalten sofort auszuführen, ohne auf eine vollständige Hydration-Last auf der Client-Seite angewiesen zu sein.

Verwendung

Du kannst Buttons wie folgt erstellen und gestalten:

Einfacher Aktionsbutton

Ein klassischer primärer Call-to-Action-Button, gestaltet mit soliden Füllungen oder Standard-Umriss-Stilen.

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

Formular-Absende-Button

In Seitenlayouts mit interaktiven Formularfeldern (wie Textfeldern innerhalb eines Fieldset) konfigurierst du den Aktionstyp des Buttons auf "submit". Dadurch erfasst das übergeordnete Formular das Ereignis und übermittelt die Felder korrekt.

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

Inline-Client-Script-Button (Fortgeschritten)

Für sofortige Interaktionen wie das Umschalten von Overlays, sanftes Scrollen oder das Auslösen benutzerdefinierter Events ohne Hydration der gesamten Seite stellst du ein rohes JavaScript-Snippet im Feld onclick bereit.

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

Gruppierte Buttons

Mehrere ergänzende Buttons nebeneinander oder als zusammenhängendes, kontinuierliches Segment rendern. Im CMS-Seitenbauer verschmilzt das Verschachteln von button-Blöcken in einen Container-Block (etwa einen Group-Block mit aktiviertem attached) ihre Ränder nahtlos.

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

Eigenschaften

Architektur-Hinweise

• Kollisionsvermeidung: Das CMS-Konfigurationsfeld verwendet den Schlüssel buttonType statt type. Das verhindert, dass visuelle Page-Builder-Editoren den HTML-Button-Typ mit dem internen Block-Diskriminator (blockType) des Systems verwechseln.
• Sofortige Ausführung: Das Bereitstellen von Skripten in onclick schreibt einen rohen Event-Handler direkt in das serverseitig gerenderte HTML-Markup. Dies ist extrem performant, da die Logik vollständig inline abläuft, ohne dass der Browser JS-Listener während der Hydration herunterladen, parsen und anhängen muss.
• Barrierefreiheit: Standard-Tastaturverhalten (Fokussieren via Tab, Aktivieren via Space oder Enter) ist im Basis-HTML-Button-Tag des Browsers nativ verfügbar und erfordert keine benutzerdefinierten ARIA-Handler.