BricksLab Catalog

@brickslab/ui-web

Bouton d'action polyvalent avec 4 variantes visuelles, 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

primary

secondary

ghost

danger

Tailles

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

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

Pleine largeur

fullWidth — s'étire à 100% du conteneur

Props

Prop	Type	Défaut	Requis	Description
`children`	`React.ReactNode`	—	✓	Contenu du bouton (texte ou éléments React).
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"primary"`	—	Variante visuelle du bouton.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille du bouton (hauteur, padding, taille de police).
`disabled`	`boolean`	`false`	—	Désactive le bouton (opacité réduite, curseur not-allowed).
`isLoading`	`boolean`	`false`	—	Affiche un spinner rotatif à la place de l'icône gauche. Désactive aussi le bouton.
`leftIcon`	`React.ReactNode`	—	—	Icône affichée à gauche du texte. Remplacée par le spinner si isLoading.
`rightIcon`	`React.ReactNode`	—	—	Icône affichée à droite du texte.
`fullWidth`	`boolean`	`false`	—	É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.

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>

// 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>