# MalioButton Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle. ## Props | Prop | Type | Défaut | Description | |------|------|--------|-------------| | `id` | `string` | auto-généré | Identifiant HTML du bouton | | `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) | | `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle | | `disabled` | `boolean` | `false` | Désactive le bouton | | `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) | | `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) | | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte | | `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels | ## Variantes - **Primary** : Fond `m-btn-primary`, texte blanc — action principale - **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire - **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire - **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice ## États Chaque variante a 4 états visuels : Default, Hover, Active, Disabled. ## Dimensions par défaut - Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass` - Hauteur : 40px (`h-[40px]`) - Police : 16px bold, line-height 150% ## Accessibilité - `type="button"` évite la soumission de formulaire involontaire - Support `disabled` natif - Focus visible avec `focus-visible:ring-2` ## Events | Event | Payload | Description | |-------|---------|-------------| | `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |