malio-layer-ui/app/story/button/buttonIcon.story.vue

<template>
  <Story title="Button/Icon">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <div class="flex gap-4">
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Retour"
          />
          <MalioButtonIcon
            icon="mdi:pencil-outline"
            aria-label="Modifier"
          />
          <MalioButtonIcon
            icon="mdi:close"
            aria-label="Fermer"
          />
          <MalioButtonIcon
            icon="mdi:download"
            aria-label="Télécharger"
          />
          <MalioButtonIcon
            icon="mdi:bell-outline"
            aria-label="Notifications"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
        <div class="flex gap-4">
          <MalioButtonIcon
            icon="mdi:cog-outline"
            aria-label="Paramètres"
          />
          <MalioButtonIcon
            icon="mdi:format-list-bulleted"
            aria-label="Liste"
          />
          <MalioButtonIcon
            icon="mdi:view-grid-outline"
            aria-label="Grille"
          />
          <MalioButtonIcon
            icon="mdi:folder-outline"
            aria-label="Dossier"
          />
          <MalioButtonIcon
            icon="mdi:delete-outline"
            aria-label="Supprimer"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <div class="flex gap-4">
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Retour"
            disabled
          />
          <MalioButtonIcon
            icon="mdi:pencil-outline"
            aria-label="Modifier"
            disabled
          />
          <MalioButtonIcon
            icon="mdi:close"
            aria-label="Fermer"
            disabled
          />
          <MalioButtonIcon
            icon="mdi:download"
            aria-label="Télécharger"
            disabled
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Ghost</h2>
        <div class="flex gap-4">
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Retour"
            variant="ghost"
          />
          <MalioButtonIcon
            icon="mdi:pencil-outline"
            aria-label="Modifier"
            variant="ghost"
          />
          <MalioButtonIcon
            icon="mdi:close"
            aria-label="Fermer"
            variant="ghost"
          />
          <MalioButtonIcon
            icon="mdi:download"
            aria-label="Télécharger"
            variant="ghost"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
        <div class="flex gap-4">
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Retour"
            variant="ghost"
            disabled
          />
          <MalioButtonIcon
            icon="mdi:pencil-outline"
            aria-label="Modifier"
            variant="ghost"
            disabled
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
        <div class="flex items-center gap-4">
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Petit"
            :icon-size="16"
          />
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Normal"
            :icon-size="24"
          />
          <MalioButtonIcon
            icon="mdi:arrow-left"
            aria-label="Grand"
            :icon-size="32"
          />
        </div>
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioButtonIcon

Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
rapides et compactes (retour, modifier, supprimer, etc.).

------------------------------------------------------------------------

## Props détaillées

### id

-   Type: string
-   Description: Identifiant HTML du bouton.
-   Comportement: Si non fourni, un id unique est généré automatiquement.

### icon

-   Type: string
-   **Requis**
-   Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).

### ariaLabel

-   Type: string
-   **Requis**
-   Description: Label d'accessibilité du bouton. Obligatoire car le bouton
    n'a pas de texte visible.

### iconSize

-   Type: string | number
-   Défaut: 24
-   Description: Taille de l'icône en pixels.

### buttonClass

-   Type: string
-   Description: Classes CSS additionnelles appliquées au bouton.

### disabled

-   Type: boolean
-   Description: Désactive le bouton.

### variant

-   Type: `'filled' | 'ghost'`
-   Défaut: `filled`
-   Description: Variante visuelle du bouton.
-   `filled` : fond coloré, icône blanche.
-   `ghost` : sans fond, icône colorée.

------------------------------------------------------------------------

## Comportement visuel

### Variante `filled` (défaut)

-   **Default** : fond `#222783`, icône blanche
-   **Hover** : fond `#121CDB`
-   **Active** : fond `#212567`
-   **Disabled** : fond `#CCCCDF`

### Variante `ghost`

-   **Default** : icône `#222783`, sans fond
-   **Hover** : icône `#121CDB`
-   **Active** : icône `#212567`
-   **Disabled** : icône `#CCCCDF`

------------------------------------------------------------------------

## Accessibilité

-   `aria-label` est requis pour décrire l'action du bouton.
-   `type="button"` pour éviter les soumissions de formulaire accidentelles.

------------------------------------------------------------------------

## Events

### click

-   Émis au clic sur le bouton.
-   Non émis si le bouton est `disabled`.
-   Retourne l'événement `MouseEvent` natif.

</docs>

<script setup lang="ts">
import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
</script>