merisia-button

<merisia-button>

Bouton accessible avec variantes visuelles, état de chargement et support des liens avec téléchargement.

Démos

Variantes

Primaire Secondaire Avertissement Danger Fantôme 
<merisia-button variant="primary">Primaire</merisia-button>
<merisia-button variant="secondary">Secondaire</merisia-button>
<merisia-button variant="warning">Avertissement</merisia-button>
<merisia-button variant="danger">Danger</merisia-button>
<merisia-button variant="ghost">Fantôme</merisia-button>

États

Désactivé Chargement 
<merisia-button disabled>Désactivé</merisia-button>
<merisia-button loading loading-text="Chargement…">Chargement</merisia-button>

Types

Soumettre Réinitialiser 
<merisia-button type="submit">Soumettre</merisia-button>
<merisia-button type="reset">Réinitialiser</merisia-button>

Lien (type="link")

Aller à l'accueil Lien secondaire 
<merisia-button type="link" href="/page">Aller à la page</merisia-button>

Téléchargement (download)

Définir download force automatiquement type="link".

Télécharger le rapport 
<!-- download force type="link" automatiquement -->
<merisia-button href="/rapport.pdf" download="rapport.pdf">
  Télécharger le rapport
</merisia-button>

Propriétés

Propriété Attribut Type Défaut Description
MerisiaButton (propres)
variant variant 'primary' | 'secondary' | 'warning' | 'danger' | 'ghost' 'primary' Variante visuelle
type type 'button' | 'submit' | 'reset' | 'link' 'button' Type du bouton ; link rend un <a> stylisé
href href string '' URL cible quand type="link"
download download string '' Nom de fichier suggéré au téléchargement ; force type="link" automatiquement
loading loading boolean false Affiche un état de chargement (bloque le clic)
loadingText loading-text string 'Chargement en cours…' Aria-label du bouton en état de chargement (i18n)
MerisiaFormElement (hérités)
name name string '' Nom du bouton dans le formulaire
value value string '' Valeur soumise avec le formulaire (type submit)
disabled disabled boolean false Désactive le bouton
MerisiaElement (hérités)
id id string auto-généré Identifiant unique du composant
lang lang string 'fr' Langue pour les messages internes (i18n)
autofocus autofocus boolean false Donne le focus au bouton au premier rendu
width width number – Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)

Accessibilité

Ressources externes

Import

import '@merisia-inc/merisia-components/button';