Button

Bouton interactif avec plusieurs variantes et tailles

Stablev1.0.0

Installation

Terminal

npm install @xe-neo/okoume

Usage basique

TSX

<Button variant="primary" onClick={handleClick}>
  Click me
</Button>

Aperçu interactif à venir

Exemples

Variantes

TSX

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

Tailles

TSX

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Avec icône

TSX

<Button leftIcon={<IconSave />}>
  Enregistrer
</Button>

État de chargement

TSX

<Button loading>
  Chargement...
</Button>

API Reference

Prop	Type	Default	Required	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost'`	`primary`	Optional	Style du bouton
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Optional	Taille du bouton
`disabled`	`boolean`	`false`	Optional	Désactive le bouton
`loading`	`boolean`	`false`	Optional	Affiche un spinner de chargement
`onClick`	`() => void`	-	Optional	Callback au clic

Accessibilité

Conforme WCAG 2.1

Support complet de la navigation clavier (Enter, Space). Attributs ARIA appropriés (role="button", aria-disabled). Focus visible et géré correctement. Compatible avec les lecteurs d'écran.