Brickslab.Toolsv2.1.1

@brickslab./ui-web

Bouton d'action polyvalent avec 5 variantes visuelles (dont custom), 3 tailles, support des icônes gauche/droite, état de chargement avec spinner animé, et état désactivé. Hover et focus-visible gérés via CSS natif sans 'use client'.

Variantes

primary · secondary · ghost · danger · custom

primary
secondary
ghost
danger
custom

Tailles

sm (28px) · md (38px) · lg (44px)

sm
md
lg

Avec icônes

leftIcon · rightIcon · les deux

leftIcon
rightIcon
leftIcon + rightIcon
danger + leftIcon

État de chargement

isLoading — spinner animé, bouton désactivé (cliquer pour simuler)

État désactivé

disabled — opacité 0.6, curseur not-allowed

Override de style

accès à la prop style pour modifier bordure ou ombre

Pleine largeur

fullWidth — s'étire à 100% du conteneur

Props

PropTypeDéfautRequisDescription
childrenReact.ReactNode—✓Contenu du bouton (texte ou éléments React).
variant"primary" | "secondary" | "ghost" | "danger" | "custom""primary"—Variante visuelle du bouton. 'custom' vous permet de fournir vos propres couleurs via customBg/customColor.
size"sm" | "md" | "lg""md"—Taille du bouton (hauteur, padding, taille de police).
disabledbooleanfalse—Désactive le bouton (opacité réduite, curseur not-allowed).
isLoadingbooleanfalse—Affiche un spinner rotatif à la place de l'icône gauche. Désactive aussi le bouton.
leftIconReact.ReactNode——Icône affichée à gauche du texte. Remplacée par le spinner si isLoading.
rightIconReact.ReactNode——Icône affichée à droite du texte.
fullWidthbooleanfalse—Étire le bouton à 100% de la largeur du conteneur.
onClick() => void——Callback déclenché au clic.
type"button" | "submit" | "reset""button"—Type HTML natif du bouton.
customBgstring——Couleur de fond personnalisée (CSS color) utilisée lorsque variant==='custom'.
customColorstring——Couleur de texte personnalisée (CSS color) utilisée lorsque variant==='custom'.
styleReact.CSSProperties——Style inline supplémentaire pour overrides (bordure, ombres...). Exemple fourni plus bas.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  children={<span>...</span>}
  variant="primary"
  size="md"
  disabled={false}
  isLoading={false}
  leftIcon={<span>...</span>}
  rightIcon={<span>...</span>}
  fullWidth={false}
  // +5 autres props disponibles
/>
childrenvariantsizedisabledisLoadingleftIconrightIconfullWidthonClicktypecustomBgcustomColorstyle

Utilisation

tsx
import { Button } from "@brickslab./ui-web";
import { FiArrowRight, FiDownload } from "react-icons/fi";

// Variantes
<Button variant="primary">Enregistrer</Button>
<Button variant="secondary">Annuler</Button>
<Button variant="ghost">En savoir plus</Button>
<Button variant="danger">Supprimer</Button>
// Variante custom (exemple de couleur arbitraire)
<Button variant="custom" customBg="#4ADE80" customColor="#000">Vert vif</Button>

// Tailles
<Button size="sm">Petit</Button>
<Button size="md">Moyen</Button>
<Button size="lg">Grand</Button>

// Avec icônes
<Button leftIcon={<FiPlus />}>Nouveau</Button>
<Button rightIcon={<FiArrowRight />}>Continuer</Button>

// Loading
<Button isLoading>Chargement...</Button>

// Disabled
<Button disabled>Indisponible</Button>

// Full width
<Button fullWidth>Pleine largeur</Button>

// Override via style
<Button
  variant="custom"
  customBg="#fff"
  customColor="#4ADE80"
  style={{ border: "2px dashed #4ADE80" }}
>Outline vert</Button>