Introduction

Le composant Button est un élément cliquable flexible et hautement interactif utilisé pour déclencher des actions, soumettre des formulaires ou réinitialiser des entrées. Conçu avec des valeurs statiques par défaut sans JavaScript, il prend nativement en charge plusieurs variantes visuelles, la mise à l'échelle des tailles et des thèmes d'accentuation.

Pour les configurations avancées, les boutons peuvent être configurés avec des états d'indicateur de chargement ou intégrer des champs d'exécution JavaScript brut et personnalisé (onclick) pour exécuter un comportement personnalisé instantanément, sans dépendre d'une charge d'hydratation côté client complète.

Utilisation

Vous pouvez construire et styliser des boutons comme ci-dessous :

Bouton d'action de base

Un bouton d'appel à l'action principal classique, stylisé avec des remplissages pleins ou des styles de contour standard.

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

Bouton de soumission de formulaire

Dans les mises en page de pages comportant des champs de formulaire interactifs (tels que des champs texte à l'intérieur d'un Fieldset), configurez le type d'action du bouton sur "submit". Cela garantit que le formulaire parent capture l'événement et soumet les champs correctement.

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

Bouton avec script client en ligne (avancé)

Pour des interactions instantanées comme basculer des superpositions, défiler en douceur ou déclencher des événements personnalisés sans hydrater toute la page, fournissez un extrait JavaScript brut dans le champ onclick.

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

Boutons groupés

Rendez plusieurs boutons complémentaires côte à côte ou joints en un segment cohérent et contigu. Dans le constructeur de pages CMS, l'imbrication de blocs button dans un bloc conteneur (comme un bloc Group avec attached activé) fusionne leurs bordures de manière transparente.

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

Propriétés

Notes d'architecture

• Prévention des collisions : Le champ de configuration CMS utilise la clé buttonType au lieu de type. Cela empêche les éditeurs visuels du constructeur de pages de confondre le type de bouton HTML avec le discriminateur de bloc interne (blockType) du système.
• Exécutions immédiates : Fournir des scripts dans onclick écrit un gestionnaire d'événement brut directement dans le balisage HTML rendu côté serveur. C'est extrêmement performant car la logique s'exécute entièrement en ligne sans que le navigateur n'ait besoin de télécharger, analyser et attacher des écouteurs JS pendant l'hydratation.
• Accessibilité : Les comportements clavier standard (focus via Tab, activation via Space ou Enter) sont natifs de la balise de bouton HTML de base du navigateur et ne nécessitent aucun gestionnaire ARIA personnalisé.