malio-layer-ui/.playground/pages/composant/button/button.vue

<script setup lang="ts">
</script>
<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Primary</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <MalioButton label="Valider" />
        <MalioButton label="Enregistrer" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <MalioButton label="Valider" disabled />
        <MalioButton label="Valider" disabled />
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Secondary</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
        <MalioButton label="Modifier" variant="secondary" />
        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover"  icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active"  icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
        <MalioButton label="Modifier" variant="secondary" disabled />
        <MalioButton label="Modifier" variant="secondary" disabled  icon-name="mdi:pencil" icon-position="left" />
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Tertiary</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <MalioButton label="Voir plus" variant="tertiary" />
        <MalioButton label="Afficher" variant="tertiary" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
        <MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
        <MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <MalioButton label="Voir plus" variant="tertiary" disabled />
        <MalioButton label="Afficher" variant="tertiary" disabled />
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Danger</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:cancel-bold" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash" icon-position="left" />
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:cancel-bold" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash" icon-position="left" />
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:cancel-bold" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash" icon-position="left" />
        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:cancel-bold" icon-position="left" />
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec icône</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <MalioButton label="Valider" icon-name="mdi:check" />
        <MalioButton label="Icône à gauche" icon-name="mdi:arrow-left" icon-position="left" />
        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil-outline" />
        <MalioButton label="Annuler" variant="tertiary" icon-name="mdi:close" />
        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" />
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
      <div class="grid grid-cols-2 items-start gap-3">
        <MalioButton label="Pleine largeur" button-class="w-full" />
        <MalioButton label="Compact" button-class="w-auto px-6" />
      </div>
    </div>
  </div>
</template>