[#MUI-10] Création d'un composant bouton (#19)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #19 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-03-24 10:12:28 +00:00
parent 968b7087b5
commit e76337502a
16 changed files with 631 additions and 50 deletions
--- a/.playground/pages/composant/button/button.vue
+++ b/.playground/pages/composant/button/button.vue
@@ -0,0 +1,112 @@
+<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>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-11] Création d'un composant navigation par onglets
 * [#MUI-20] Création d'un composant sidebar
 * [#MUI-23] Revoir la config couleur tailwind
+* [#MUI-10] Création d'un composant bouton

 ### Changed

--- a/app/components/malio/button/Button.test.ts
+++ b/app/components/malio/button/Button.test.ts
@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { DefineComponent } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import Button from './Button.vue'
+
+type ButtonProps = {
+  id?: string
+  label?: string
+  disabled?: boolean
+  buttonClass?: string
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+}
+
+const ButtonForTest = Button as DefineComponent<ButtonProps>
+
+const mountComponent = (props: ButtonProps = {}, slots?: Record<string, string>) =>
+  mount(ButtonForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButton', () => {
+  it('renders a button with label', () => {
+    const wrapper = mountComponent({ label: 'Valider' })
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Valider')
+  })
+
+  it('renders slot content over label prop', () => {
+    const wrapper = mountComponent({ label: 'Prop' }, { default: 'Slot content' })
+
+    expect(wrapper.text()).toContain('Slot content')
+    expect(wrapper.text()).not.toContain('Prop')
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({ id: 'custom-id' })
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-')).toBe(true)
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  // --- Variant: Primary (default) ---
+
+  it('applies primary variant by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies primary disabled styles', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Secondary ---
+
+  it('applies secondary variant', () => {
+    const wrapper = mountComponent({ variant: 'secondary' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-secondary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies secondary disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'secondary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Tertiary ---
+
+  it('applies tertiary variant with border and no background', () => {
+    const wrapper = mountComponent({ variant: 'tertiary' })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies tertiary disabled styles with border', () => {
+    const wrapper = mountComponent({ variant: 'tertiary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+  })
+
+  // --- Variant: Danger ---
+
+  it('applies danger variant', () => {
+    const wrapper = mountComponent({ variant: 'danger' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-danger')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies danger disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'danger', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Sizing ---
+
+  it('applies correct dimensions', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('w-[240px]')
+    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+  })
+
+  it('applies font styles', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-base')
+    expect(wrapper.get('button').classes()).toContain('font-bold')
+  })
+
+  // --- buttonClass override ---
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({ buttonClass: 'w-full rounded-full' })
+
+    expect(wrapper.get('button').classes()).toContain('w-full')
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  // --- Icon ---
+
+  it('renders icon on the right by default', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-right' })
+
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+  })
+
+  it('renders icon on the left when specified', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-left', iconPosition: 'left' })
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('does not render icon when iconName is empty', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('passes icon name and size to icon component', () => {
+    const wrapper = mount(ButtonForTest, {
+      props: { iconName: 'mdi:check', iconSize: 18 },
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:check')
+    expect(iconComponent.props('width')).toBe(18)
+    expect(iconComponent.props('height')).toBe(18)
+  })
+})
--- a/app/components/malio/button/Button.vue
+++ b/app/components/malio/button/Button.vue
@@ -0,0 +1,102 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'left'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-left"
+    />
+
+    <span><slot>{{ label }}</slot></span>
+
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'right'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-right"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioButton', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    disabled?: boolean
+    buttonClass?: string
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+    iconSize?: string | number
+  }>(),
+  {
+    id: '',
+    label: '',
+    disabled: false,
+    buttonClass: '',
+    variant: 'primary',
+    iconName: '',
+    iconPosition: 'right',
+    iconSize: 16,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    if (props.variant === 'tertiary') {
+      return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
+    }
+    return 'bg-m-disabled text-white cursor-not-allowed'
+  }
+
+  switch (props.variant) {
+    case 'secondary':
+      return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
+    case 'tertiary':
+      return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
+    case 'danger':
+      return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
+    default:
+      return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+  }
+})
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex w-[240px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    variantClasses.value,
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>
--- a/app/components/malio/checkbox/Checkbox.vue
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -110,7 +110,7 @@ const mergedLabelClass = computed(() =>
  twMerge(
    'cbx text-black',
    disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    props.labelClass,
  ),
@@ -120,7 +120,7 @@ const mergedMessageClass = computed(() =>
  twMerge(
    'text-xs',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'text-m-muted',
@@ -200,14 +200,14 @@ const onChange = (event: Event) => {
  stroke-dashoffset: 0;
 }

-.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+.inp-cbx + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
 }
-.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-error) / 1);
+.cbx.text-m-danger span:first-child svg {
+  stroke: rgb(var(--m-danger) / 1);
 }
-.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
+.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
 }

 .inp-cbx + .cbx.text-m-success span:first-child {
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -40,7 +40,7 @@
      data-test="icon"
      :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : iconColor,
      iconPositionClass,
@@ -53,7 +53,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -143,7 +143,7 @@ const mergedInputClass = computed(() =>
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
@@ -159,7 +159,7 @@ const mergedLabelClass = computed(() =>
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -54,7 +54,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -180,7 +180,7 @@ const mergedInputClass = computed(() =>
    ' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
    props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : '',
@@ -191,7 +191,7 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
  twMerge(
    'cursor-pointer text-black mr-4 text-[18px]',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    props.disabled ? 'cursor-not-allowed text-black/60' : '',
    props.labelClass,
@@ -203,7 +203,7 @@ const mergedButtonMinusClass = computed(() =>
    'h-[22px] w-[40px] border border-black rounded-s-[3px]',
    isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
    hasError.value
-      ? 'border-m-error'
+      ? 'border-m-danger'
      : hasSuccess.value
        ? 'border-m-success'
        : '',
@@ -215,7 +215,7 @@ const mergedButtonPlusClass = computed(() =>
    'h-[22px] w-[40px] border border-black rounded-e-[3px]',
    isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
    hasError.value
-      ? 'border-m-error'
+      ? 'border-m-danger'
      : hasSuccess.value
        ? 'border-m-success'
        : '',
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -39,7 +39,7 @@
      data-test="icon"
      :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : 'text-m-muted',
      'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
@@ -53,7 +53,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -142,7 +142,7 @@ const mergedInputClass = computed(() =>
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
@@ -158,7 +158,7 @@ const mergedLabelClass = computed(() =>
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -12,7 +12,7 @@
      isFilled ? 'border-black' : 'border-m-muted',
      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
      hasError
-        ? 'border-m-error focus:border-m-error focus:pl-[11px]'
+        ? 'border-m-danger focus:border-m-danger focus:pl-[11px]'
        : hasSuccess
          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
          : 'focus:border-m-primary focus:pl-[11px]',
@@ -43,7 +43,7 @@
    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
    disabled ? 'text-black/60' : '',
    hasError
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess
        ? 'text-m-success'
        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
@@ -67,7 +67,7 @@
      :id="`${inputId}-describedby`"
      :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
--- a/app/components/malio/input/InputUpload.vue
+++ b/app/components/malio/input/InputUpload.vue
@@ -43,7 +43,7 @@
      data-test="icon"
      :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : 'text-m-muted',
      'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
@@ -56,7 +56,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -131,7 +131,7 @@ const mergedInputClass = computed(() =>
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
@@ -147,7 +147,7 @@ const mergedLabelClass = computed(() =>
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
--- a/app/components/malio/radio/RadioButton.vue
+++ b/app/components/malio/radio/RadioButton.vue
@@ -125,7 +125,7 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
  twMerge(
    'radio-text mt-px cursor-pointer text-black',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    disabled.value ? 'cursor-not-allowed text-black/60' : '',
    props.labelClass,
@@ -136,7 +136,7 @@ const mergedMessageClass = computed(() =>
  twMerge(
    'radio-message ml-3 -mt-1 text-xs',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'text-m-muted',
@@ -170,11 +170,11 @@ const onChange = (event: Event) => {
 }

 .radio-control.is-error input[type='radio'] {
-  border-color: rgb(var(--m-error) / 1);
+  border-color: rgb(var(--m-danger) / 1);
 }

 .radio-control.is-error .radio-dot {
-  color: rgb(var(--m-error) / 1);
+  color: rgb(var(--m-danger) / 1);
 }

 .radio-control.is-success input[type='radio'] {
--- a/app/components/malio/select/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -12,9 +12,9 @@
          hasError
            ? isOpen
              ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
-              : 'border-m-error'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
            : hasSuccess
              ? isOpen
                ? openDirection === 'down'
@@ -46,7 +46,7 @@
        :class="[
          isOpen ? 'top-2  z-30' : 'top-2',
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : isOpen
@@ -75,7 +75,7 @@
        class="absolute right-3 top-1/2 -translate-y-1/2"
        :class="[
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-current'
@@ -109,7 +109,7 @@
            ? 'select-scrollbar-success'
            : 'select-scrollbar-primary',
        hasError
-          ? 'border-m-error'
+          ? 'border-m-danger'
          : hasSuccess
            ? 'border-m-success'
            : 'border-m-primary'
@@ -140,7 +140,7 @@
    :id="`${buttonId}-describedby`"
    :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success'
          : 'text-m-muted',
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -12,9 +12,9 @@
          hasError
            ? isOpen
              ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
-              : 'border-m-error'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
            : hasSuccess
              ? isOpen
                ? openDirection === 'down'
@@ -46,7 +46,7 @@
        :class="[
          shouldFloatLabel ? 'top-2 z-30' : 'top-1/2 -translate-y-1/2',
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : isOpen
@@ -103,7 +103,7 @@
        class="absolute right-3 top-1/2 -translate-y-1/2"
        :class="[
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-current'
@@ -137,7 +137,7 @@
            ? 'select-scrollbar-success'
            : 'select-scrollbar-primary',
        hasError
-          ? 'border-m-error'
+          ? 'border-m-danger'
          : hasSuccess
            ? 'border-m-success'
            : 'border-m-primary'
@@ -190,7 +190,7 @@
    :id="`${buttonId}-describedby`"
    :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success'
          : 'text-m-muted',
--- a/app/components/malio/time/Time.vue
+++ b/app/components/malio/time/Time.vue
@@ -62,7 +62,7 @@
      :id="`${inputId}-describedby`"
      :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -185,7 +185,7 @@ const mergedGroupClass = computed(() =>
 const mergedLabelClass = computed(() =>
  twMerge(
    'mt-px mr-4 cursor-pointer text-black text-[18px]',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    props.disabled ? 'cursor-not-allowed text-black/60' : '',
    props.labelClass
@@ -197,7 +197,7 @@ const mergedInputClass = (field: 'hours' | 'minutes') =>
    'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'focus:border-2 border-m-error focus:border-m-error'
+      ? 'focus:border-2 border-m-danger focus:border-m-danger'
      : hasSuccess.value
        ? 'focus:border-2 border-m-success focus:border-m-success'
        : activeField.value === field
--- a/app/story/button/button.story.vue
+++ b/app/story/button/button.story.vue
@@ -0,0 +1,148 @@
+<template>
+  <Story title="Button/Button">
+    <Variant title="Primary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Valider" />
+        <MalioButton label="Valider" icon-name="mdi:check" />
+        <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="Valider" button-class="bg-m-btn-primary-hover" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
+        <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="Valider" button-class="bg-m-btn-primary-active" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
+        <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="Valider" disabled />
+        <MalioButton label="Valider" disabled icon-name="mdi:check" />
+      </div>
+    </Variant>
+
+    <Variant title="Secondary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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>
+    </Variant>
+
+    <Variant title="Tertiary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Voir plus" variant="tertiary" />
+        <MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
+        <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="Voir plus" variant="tertiary" disabled />
+        <MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
+      </div>
+    </Variant>
+
+    <Variant title="Danger">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <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="Supprimer" variant="danger" />
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" 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="Supprimer" variant="danger" disabled />
+        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="flex flex-col items-start gap-3 p-4">
+        <MalioButton label="Pleine largeur" button-class="w-full" />
+        <MalioButton label="Compact" button-class="w-auto px-6" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# 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`) |
+</docs>
+
+<script setup lang="ts">
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'ButtonStory' })
+</script>
--- a/app/story/input/inputUpload.story.vue
+++ b/app/story/input/inputUpload.story.vue
@@ -180,7 +180,7 @@ et accessibilité.
 ### Couleur de l'icône

 -   `text-m-muted` par défaut.
-   `text-m-error` si la prop `error` est renseignée.
+-   `text-m-danger` si la prop `error` est renseignée.
 -   `text-m-success` si la prop `success` est renseignée.

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