BeeButton

Un bouton avec trois variantes, une forme arrondie, un état de chargement et un état désactivé.

import { BeeButton } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Variantes

primary pour l'action principale d'un écran, secondary pour les actions alternatives, ghost pour les actions discrètes.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeButton variant="primary">Enregistrer</BeeButton>
    <BeeButton variant="secondary">Annuler</BeeButton>
    <BeeButton variant="ghost">En savoir plus</BeeButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

Forme arrondie

Par défaut, les coins sont légèrement arrondis. La prop rounded passe le bouton en forme de pilule (--bd-radius-full). Elle fonctionne avec toutes les variantes.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div class="row">
      <BeeButton variant="primary">Enregistrer</BeeButton>
      <BeeButton variant="secondary">Annuler</BeeButton>
      <BeeButton variant="ghost">En savoir plus</BeeButton>
    </div>

    <div class="row">
      <BeeButton variant="primary" rounded>Enregistrer</BeeButton>
      <BeeButton variant="secondary" rounded>Annuler</BeeButton>
      <BeeButton variant="ghost" rounded>En savoir plus</BeeButton>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

États

Pendant le chargement, le bouton garde sa largeur, affiche un spinner et ignore les clics. Il expose aria-busy aux lecteurs d'écran.

<script setup lang="ts">
import { BeeButton } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeButton loading>Envoi…</BeeButton>
    <BeeButton disabled>Indisponible</BeeButton>
    <BeeButton variant="secondary" disabled>Indisponible</BeeButton>
    <BeeButton variant="ghost" disabled>Indisponible</BeeButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
</style>

API

Props

Nom	Type	Défaut	Description
variant	"primary" | "secondary" | "ghost"	"primary"	Style visuel du bouton.
type	"button" | "submit" | "reset"	"button"	Attribut type du <button> natif.
rounded	boolean	false	Bouton en forme de pilule.
disabled	boolean	false	Désactive le bouton.
loading	boolean	false	Affiche un spinner, bloque les clics.

Événements

Nom	Payload	Description
click	MouseEvent	Émis au clic, sauf si le bouton est disabled ou loading.

Slots

Nom	Description
default	Libellé du bouton.

Variables CSS utilisées

--bd-color-primary, --bd-color-primary-hover, --bd-color-primary-edge, --bd-color-on-primary, --bd-color-primary-dark, --bd-color-primary-light, --bd-color-border, --bd-color-text-muted, --bd-color-focus, --bd-font-main, --bd-font-size-md, --bd-radius-full, --bd-space-sm, --bd-space-md, --bd-control-height, --bd-border-width-strong, --bd-focus-ring-width, --bd-focus-ring-offset, --bd-button-edge, --bd-transition-fast.

Accessibilité

• Cible tactile d'au moins 44 px de haut.
• Anneau de focus visible au clavier (:focus-visible).
• aria-busy pendant le chargement.
• Animations réduites si prefers-reduced-motion est activé.